Next.js

Next.js とは

Next.js は、Vercel が開発する React ベースのフルスタック Web フレームワークである。SSR (サーバーサイドレンダリング)、SSG (静的サイト生成)、ISR (増分静的再生成)、App Router、React Server Components を統合的に提供する。2016 年にリリースされ、React アプリケーションのデファクトスタンダードになっている。

レンダリング戦略

レンダリング戦略を以下にまとめる。

戦略	タイミング	用途
SSG (Static Site Generation)	ビルド時	ブログ、ドキュメント、LP
SSR (Server-Side Rendering)	リクエスト時	ダッシュボード、検索結果
ISR (Incremental Static Regeneration)	バックグラウンドで再生成	EC サイト、ニュース
CSR (Client-Side Rendering)	ブラウザで実行	インタラクティブな UI

App Router (Next.js 13+)

App Router (Next.js 13+) を図で示す。

app/
├── layout.tsx          # 共通レイアウト
├── page.tsx            # / ルート
├── about/
│   └── page.tsx        # /about ルート
├── blog/
│   ├── page.tsx        # /blog ルート
│   └── [slug]/
│       └── page.tsx    # /blog/:slug ルート (動的ルート)
└── api/
    └── users/
        └── route.ts    # API Route: /api/users

Server Components と Client Components

Server Components と Client Components のコード例を示す。

// Server Component (デフォルト): サーバーで実行、JS がクライアントに送られない
async function UserList() {
  const users = await db.users.findMany(); // サーバーで直接 DB アクセス
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

// Client Component: ブラウザで実行、インタラクティブ
'use client';
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Server Components はサーバーで実行されるため、DB アクセスや API キーの使用が安全にできる。JavaScript がクライアントに送られないため、バンドルサイズが削減される。

静的エクスポート

静的エクスポートのコード例を示す。

// next.config.ts
const config: NextConfig = {
  output: 'export',  // 静的 HTML を生成 (S3 + CloudFront でホスティング)
};

output: 'export' で全ページを静的 HTML に出力し、S3 + CloudFront でホスティングできる。サーバーが不要なため、コストが最小限だ。

AWS でのホスティング

AWS でのホスティングを以下にまとめる。

方式	特徴	コスト
S3 + CloudFront (静的エクスポート)	サーバーレス、最安	ほぼ無料
Lambda@Edge + S3	SSR 対応	低〜中
ECS / Fargate	フル機能	中〜高
Amplify Hosting	マネージド、CI/CD 統合	低〜中

静的サイトなら S3 + CloudFront が最もコスト効率が良い。SSR が必要な場合は Amplify Hosting か Lambda@Edge を検討する。

詳しくは関連書籍を参照。