Next.js: Dynamic server usage

概要

静的に生成されるべきページでサーバー専用の機能（cookies, headers等）を使用した際に発生するエラーです。

エラーメッセージ

``` Error: Dynamic server usage: cookies This page needs to be rendered on the server because it uses cookies. ```

原因

1. 静的ページでのcookies/headers使用: Server Componentで動的API使用
2. generateStaticParams との競合: 静的生成とサーバー機能の混在
3. revalidate設定との不整合: キャッシュ戦略の矛盾

解決策

1. 動的レンダリングを明示

```typescript // app/page.tsx export const dynamic = ‘force-dynamic’; // または export const revalidate = 0;

import { cookies } from ’next/headers’;

export default function Page() { const cookieStore = cookies(); // … } ```

2. 動的データを分離

```typescript // 静的な親コンポーネント export default function Page() { return ( <Suspense fallback={}> ); }

// 動的な子コンポーネント async function DynamicContent() { const cookieStore = cookies(); const user = await getUser(cookieStore.get(’token’)); return ; } ```

3. クライアントコンポーネントで処理

```typescript ‘use client’;

import { useEffect, useState } from ‘react’;

export default function UserMenu() { const [user, setUser] = useState(null);

useEffect(() => { // クライアントサイドでcookieを読み取り fetch(’/api/user’).then(res => res.json()).then(setUser); }, []);

return user ? {user.name} : null; } ```

4. generateStaticParamsと併用

```typescript // 一部のパスのみ静的生成 export async function generateStaticParams() { return [{ slug: ‘about’ }, { slug: ‘contact’ }]; }

// 他は動的生成 export const dynamicParams = true; ```

よくある間違い

• 全ページを静的にしようとする
• cookies()をトップレベルで無条件に呼び出す
• Suspenseなしで動的コンポーネントを配置

関連エラー

• Next.js: Hydration mismatch
• Next.js: Hydration error