Next.js 13.4.5使用generateStaticParams()时触发cookies动态服务器错误

原因分析 #

当你使用generateStaticParams()时，Next.js会在构建阶段预渲染所有匹配的页面为静态HTML文件，这个过程没有用户请求上下文，无法获取cookies这类请求级别的动态数据。但你的<Navbar />作为服务器组件，在渲染时直接调用了cookies() API，静态页面构建时触发了动态服务器逻辑，从而抛出Dynamic server usage: cookies错误。

解决方案 #

方案1：强制目标页面动态渲染 #

在app/listings/[id]/page.js中添加配置，让页面在每次用户请求时才渲染，确保能获取请求上下文：

// app/listings/[id]/page.js
export const dynamic = 'force-dynamic';

export async function generateStaticParams() {
  // 你的参数生成逻辑保持不变
}

export default function ListingPage({ params }) {
  // 页面内容
}

缺点：失去静态页面的缓存优势，每次请求都需重新渲染整个页面。

方案2：将Navbar设为动态服务器组件 #

给<Navbar />组件添加动态配置，让它在请求时动态渲染（而非构建时），即使页面主体是静态的，也能正常获取cookies：

// app/components/Navbar.jsx
export const dynamic = 'force-dynamic';

import { cookies } from 'next/headers';

export default async function Navbar() {
  const token = cookies().get('token')?.value;
  const user = token 
    ? await fetch('/api/user', {
        headers: { Authorization: `Bearer ${token}` }
      }).then(res => res.json())
    : null;

  return (
    <nav>
      {/* 静态导航链接 */}
      <a href="/">首页</a>
      <a href="/listings">列表</a>
      {/* 动态用户信息 */}
      {user && <span className="user-info">欢迎，{user.username}</span>}
    </nav>
  );
}

优势：页面主体仍保持静态缓存，仅Navbar部分动态渲染，兼顾性能与动态需求。

方案3：捕获静态渲染时的错误 #

在Navbar中捕获cookies()调用的错误，避免静态构建失败，同时在用户请求时正常获取用户信息：

// app/components/Navbar.jsx
import { cookies } from 'next/headers';

export default async function Navbar() {
  let user = null;
  try {
    const token = cookies().get('token')?.value;
    if (token) {
      user = await fetch('/api/user', {
        headers: { Authorization: `Bearer ${token}` }
      }).then(res => res.json());
    }
  } catch (err) {
    // 静态渲染环境下跳过用户信息获取
  }

  return (
    <nav>
      {/* 导航内容 */}
      {user && <span>欢迎，{user.username}</span>}
    </nav>
  );
}

优势：页面保持静态特性，静态构建时Navbar不渲染用户信息，用户请求时正常显示。

内容的提问来源于stack exchange，提问作者Kofi Talent