Next.js13.3电商应用部署Vercel遇DynamicServerError: headers问题

问题现象 #

本地开发环境运行正常，部署到Vercel后触发DynamicServerError: Dynamic server usage: headers错误，报错栈指向AuthCheck中间件调用headers的位置。业务流程为：Admin Dashboard页面通过SWR调用/api/Admin/category/getCategory接口获取分类数据，存入Redux后在子组件展示。

报错信息 #

Error in getting all categories: DynamicServerError: Dynamic server usage: headers
    at staticGenerationBailout (/vercel/path0/.next/server/chunks/536.js:181:21)
    at Object.headers (/vercel/path0/.next/server/chunks/616.js:201:62)
    at handleReqBailout (/vercel/path0/.next/server/chunks/616.js:3048:35)
    at Object.get (/vercel/path0/.next/server/chunks/616.js:3068:13)
    at AuthCheck (/vercel/path0/.next/server/app/api/Admin/category/delete-category/route.js:237:23)
    at GET (/vercel/path0/.next/server/app/api/Admin/category/getCategory/route.js:164:67)
    at async /vercel/path0/.next/server/chunks/616.js:3352:37 {
  digest: 'DYNAMIC_SERVER_USAGE'
}

问题原因 #

Next.js 13 App Router中，API路由默认会被静态优化。如果路由中使用了headers()这类全局动态函数（而非当前请求对象自带的方法），静态生成过程会触发staticGenerationBailout，导致部署后报错。本地开发时默认启用动态模式，所以不会出现该问题。

解决方案 #

方案1：强制API路由为动态 #

在/api/Admin/category/getCategory/route.js顶部添加配置，强制该路由使用动态模式：

export const dynamic = 'force-dynamic'; // 新增该行

import connectDB from "@/DB/connectDB";
import AuthCheck from "@/middleware/AuthCheck";
import { NextResponse } from "next/server";
import Category from "@/model/Category";

export async function GET(req: Request) {
  try {
    await connectDB();
    const isAuthenticated = await AuthCheck(req);

    if (isAuthenticated) {
      const getData = await Category.find({});
      if (getData) {
        return NextResponse.json({success  :true , data : getData});
      } else {
        return NextResponse.json({status: 204 , success: false, message: 'No categories found.' });
      }
    } else {
      return NextResponse.json({status: 401 , success: false, message: "You are not authorized." });
    }
  } catch (error) {
    console.log('Error in getting all categories:', error);
    return NextResponse.json({status : 500 , success: false, message: 'Something went wrong. Please try again!' });
  }
}

方案2：修改AuthCheck中间件的headers获取方式 #

如果AuthCheck中间件中使用了Next.js的headers()全局函数，改为从传入的req对象直接获取headers：

原错误写法示例

import { headers } from 'next/headers';

async function AuthCheck() {
  const headersList = headers();
  const token = headersList.get('authorization');
  // ... 鉴权逻辑
}

修改后写法

async function AuthCheck(req: Request) {
  const token = req.headers.get('authorization');
  // ... 鉴权逻辑
}

这种方式不需要强制动态路由，更符合App Router的设计原则，避免不必要的动态渲染开销。

验证 #

部署修改后的代码到Vercel，访问Admin Dashboard页面，确认分类数据正常加载，无报错。

内容的提问来源于stack exchange，提问作者Abdullah moiz