Next.js

Next.jsとは何か

Next.jsはReactベースのフルスタックフレームワーク。2016年にVercel（旧ZEIT）が開発・公開した。Reactは本来UIライブラリであり、ルーティングやサーバーサイドレンダリング（SSR）は自前で構築する必要があった。Next.jsはその課題を解決し、Reactアプリケーションを「すぐにプロダクションで使える状態」にするために生まれた。

たとえるなら、Reactが「エンジン」だとすれば、Next.jsは「完成した車」。エンジン単体では走れないが、車になれば道路を走れる。

Next.jsの核心的な特徴

なぜNext.jsが生まれたのか

2016年以前のReactの課題

Reactは強力なUIライブラリだったが、プロダクション利用には多くの「自分で選ぶ・設定する」作業が必要だった。

Vercel（旧ZEIT）の思想

Vercelの創業者Guillermo Rauchは「フロントエンド開発はもっとシンプルであるべき」という信念を持っていた。ZEITはNode.jsのリアルタイムフレームワーク「Socket.io」の開発者でもあるRauchが設立した企業で、デプロイプラットフォーム「Now（現Vercel）」を提供していた。

Next.jsはその延長線上で、「ゼロ設定でReactアプリをSSR対応にする」という目的で誕生した。

Next.jsの進化の歴史

レンダリング戦略

Next.jsの最大の強みは、用途に応じて最適なレンダリング戦略を選べること。

SSR（Server-Side Rendering）

リクエストのたびにサーバーでHTMLを生成する。常に最新のデータを表示したいページに適している。

// App Router: サーバーコンポーネント + 動的レンダリング
async function ProductPage({ params }: { params: { id: string } }) {
  // リクエストごとにデータを取得
  const product = await fetch(`https://api.example.com/products/${params.id}`, {
    cache: 'no-store', // キャッシュしない = SSR
  })
  const data = await product.json()

  return (
    <div>
      <h1>{data.name}</h1>
      <p>価格: {data.price}円</p>
      <p>在庫: {data.stock}個</p>
    </div>
  )
}

SSG（Static Site Generation）

ビルド時にHTMLを生成する。コンテンツが頻繁に変わらないページに最適。

// App Router: デフォルトでSSG（静的レンダリング）
async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`)
  const data = await post.json()

  return (
    <article>
      <h1>{data.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: data.content }} />
    </article>
  )
}

// ビルド時に生成するパスを指定
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json())
  return posts.map((post: { slug: string }) => ({ slug: post.slug }))
}

ISR（Incremental Static Regeneration）

SSGの発展形。静的ページを一定間隔で再生成する。「ほぼ静的だが、たまに更新される」コンテンツに最適。

// App Router: revalidateオプションでISRを実現
async function NewsPage() {
  const news = await fetch('https://api.example.com/news', {
    next: { revalidate: 60 }, // 60秒ごとに再生成
  })
  const articles = await news.json()

  return (
    <ul>
      {articles.map((article: { id: string; title: string }) => (
        <li key={article.id}>{article.title}</li>
      ))}
    </ul>
  )
}

レンダリング戦略の使い分け

App Router

Pages RouterからApp Routerへ

Next.js 13で導入されたApp Routerは、Next.jsのアーキテクチャを根本から刷新した。

ファイル規約

App Routerでは特別な名前のファイルが特別な役割を持つ。

app/
├── layout.tsx          # ルートレイアウト（必須）
├── page.tsx            # / のページ
├── loading.tsx         # ローディングUI
├── error.tsx           # エラーUI
├── not-found.tsx       # 404ページ
├── blog/
│   ├── layout.tsx      # ブログ用レイアウト
│   ├── page.tsx        # /blog のページ
│   └── [slug]/
│       └── page.tsx    # /blog/:slug のページ
├── api/
│   └── users/
│       └── route.ts    # API Route: /api/users
└── (marketing)/        # ルートグループ（URLに影響しない）
    ├── about/
    │   └── page.tsx    # /about
    └── contact/
        └── page.tsx    # /contact

Server Components と Client Components

App Routerの最大の変更点は、**React Server Components（RSC）**をデフォルトにしたこと。

// サーバーコンポーネント（デフォルト）
// - サーバーでのみ実行される
// - DBに直接アクセスできる
// - バンドルサイズに影響しない
async function UserList() {
  const users = await db.user.findMany() // DBに直接アクセス
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

'use client' // この宣言でクライアントコンポーネントになる

import { useState } from 'react'

// クライアントコンポーネント
// - ブラウザで実行される
// - useState, useEffect等のフックが使える
// - イベントハンドラが使える
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
}

Server Actions

Next.js 14で安定版となったServer Actionsは、フォーム送信やデータ変更をサーバー側で直接処理できる仕組み。

// app/actions.ts
'use server'

export async function createTodo(formData: FormData) {
  const title = formData.get('title') as string
  await db.todo.create({ data: { title } })
  revalidatePath('/todos')
}

// app/todos/page.tsx
import { createTodo } from '../actions'

export default function TodoPage() {
  return (
    <form action={createTodo}>
      <input name="title" placeholder="新しいToDo" />
      <button type="submit">追加</button>
    </form>
  )
}

プロジェクトの始め方

# Next.jsプロジェクトの作成
npx create-next-app@latest my-app --typescript --tailwind --app --src-dir

cd my-app
npm run dev

生成されるフォルダ構造:

my-app/
├── src/
│   └── app/
│       ├── layout.tsx       # ルートレイアウト
│       ├── page.tsx         # ホームページ
│       ├── globals.css      # グローバルスタイル
│       └── favicon.ico
├── public/                  # 静的ファイル
├── next.config.ts           # Next.js設定
├── tailwind.config.ts       # Tailwind CSS設定
├── tsconfig.json            # TypeScript設定
└── package.json

メリットとデメリット

メリット

デメリット

代替フレームワークとの比較

実践: ミニマルなブログアプリ

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        <nav>
          <a href="/">ホーム</a>
          <a href="/blog">ブログ</a>
        </nav>
        <main>{children}</main>
      </body>
    </html>
  )
}

// app/blog/page.tsx
type Post = { id: string; title: string; excerpt: string }

export default async function BlogPage() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 }, // 1時間ごとに再生成
  })
  const posts: Post[] = await res.json()

  return (
    <div>
      <h1>ブログ記事一覧</h1>
      {posts.map(post => (
        <article key={post.id}>
          <h2><a href={`/blog/${post.id}`}>{post.title}</a></h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  )
}

// app/blog/[id]/page.tsx
type Post = { id: string; title: string; content: string; createdAt: string }

export default async function BlogPostPage({ params }: { params: { id: string } }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`)
  const post: Post = await res.json()

  return (
    <article>
      <h1>{post.title}</h1>
      <time>{new Date(post.createdAt).toLocaleDateString('ja-JP')}</time>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}

export async function generateStaticParams() {
  const res = await fetch('https://api.example.com/posts')
  const posts: { id: string }[] = await res.json()
  return posts.map(post => ({ id: post.id }))
}

参考文献

• Next.js 公式ドキュメント - Next.jsの公式リファレンスとチュートリアル
• Next.js Learn - 公式のインタラクティブ学習コース
• Vercel 公式サイト - Next.jsの開発元が提供するデプロイプラットフォーム
• React Server Components RFC - RSCの設計文書
• Next.js GitHub - ソースコードとIssue
• Guillermo Rauch - 7 Principles of Rich Web Applications - Next.jsの設計思想の原点となったブログ記事
• Remix 公式ドキュメント - 代替フレームワークの公式リファレンス
• Astro 公式ドキュメント - コンテンツ重視の代替フレームワーク