Next.jsとは？Reactとの違いやインストール・基本操作を解説！【2026年最新版】

return (
<div>
{products.map(p => <p key={p.id}>{p.name}</p>)}
</div>
)
}

// Client Component——ブラウザ側でも動く
“use client” // この1行でClient Componentになる

import { useState } from ‘react’

function Counter() {
const [count, setCount] = useState(0) // Hooksが使える
return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

# 対話形式で各種設定を選択する（2026年現在のデフォルト推奨設定）
# What is your project named? → my-app（任意のプロジェクト名）
# Would you like to use TypeScript? → Yes（推奨）
# Would you like to use ESLint? → Yes（推奨）
# Would you like to use Tailwind CSS? → Yes（推奨）
# Would you like to use `src/` directory? → No（シンプルに始める場合）
# Would you like to use App Router? → Yes（推奨）
# Would you like to use Turbopack? → Yes（高速ビルド）
# Would you like to customize the import alias? → No

# 開発サーバーを起動
npm run dev

# ブラウザで http://localhost:3000 にアクセス
# ファイルを編集するとHMR（ホットリロード）でリアルタイム反映される

export default function AboutPage() {
return (
<main>
<h1>About</h1>
<p>このサイトについての説明です。</p>
</main>
)
}

// SEOのためにメタデータをexportする
export const metadata = {
title: ‘About — サイト名’,
description: ‘このサイトについての説明です’,
}

type Props = {
params: { slug: string }
}

export default function BlogPost({ params }: Props) {
return <h1>記事：{params.slug}</h1>
}

export async function GET(request: Request) {
return Response.json({ message: ‘Hello from Next.js API!’ })
}

export async function POST(request: Request) {
const body = await request.json()
// データベース処理等をここに書く
return Response.json({ received: body })
}

# サーバー側のみで使える環境変数（APIキー等の秘密情報）
DATABASE_URL=postgresql://user:pass@localhost/mydb
SECRET_API_KEY=sk-xxxxxxxxxxxxxxxx

# ブラウザでも使える環境変数（NEXT_PUBLIC_ プレフィックスが必要）
NEXT_PUBLIC_ANALYTICS_ID=UA-12345678-1
NEXT_PUBLIC_SITE_URL=https://mysite.com

// クライアントコンポーネント内で使う（NEXT_PUBLIC_ が必要）
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL