Next.js 13构建时出现Dynamic server usage错误求助

错误原因分析 #

报错提示指向页面组件无法静态渲染，而非API路由本身。核心问题是你的页面组件直接依赖了动态服务器资源（如request对象、nextUrl.searchParams），或者直接调用了API控制器函数（getUsers），导致Next.js在构建时无法完成静态渲染。

解决方案 #

方案1：页面组件改用Next.js推荐的查询参数获取方式 #

如果页面需要支持静态渲染，直接通过页面组件的searchParams props获取URL参数，再通过fetch调用API：

// /app/armies/page.js
export default async function ArmyPage({ searchParams }) {
  // 从props直接获取查询参数
  const email = searchParams?.email || "";
  const phone = searchParams?.phone || "";
  const id = searchParams?.id || "";

  // 通过fetch调用API获取数据
  const res = await fetch(`/api/armies?email=${email}&phone=${phone}&id=${id}`, {
    // 根据需求设置缓存策略，如需实时数据用no-store
    cache: "no-store"
  });
  const users = await res.json();

  return (
    <div>
      {/* 渲染用户数据 */}
    </div>
  );
}

方案2：强制页面动态渲染 #

如果页面必须依赖动态服务器资源（如直接访问request对象），在页面组件中添加dynamic指令强制动态渲染：

// /app/armies/page.js
// 标记页面为强制动态渲染
export const dynamic = 'force-dynamic';

export default async function ArmyPage() {
  const { request } = await import('next/headers');
  const url = new URL(request().url);
  const email = url.searchParams.get('email') || "";

  // 调用API获取数据
  const res = await fetch(`/api/armies?email=${email}`, { cache: "no-store" });
  const users = await res.json();

  return <div>{/* 页面内容 */}</div>;
}

方案3：规范API路由的调用方式 #

确保页面组件通过fetch请求API，而非直接导入并调用getUsers函数。直接调用控制器函数会让页面绑定服务器端的request对象，导致无法静态渲染：

// ❌ 错误示例：页面直接调用getUsers
import { getUsers } from "@/backend/apiControllers/getUsers";
import { request } from 'next/headers';

export default async function ArmyPage() {
  const users = await getUsers(request()); // 触发静态渲染报错
  return <div>{/* 内容 */}</div>;
}

// ✅ 正确示例：通过fetch请求API
export default async function ArmyPage({ searchParams }) {
  const res = await fetch(`/api/armies?email=${searchParams?.email || ""}`);
  const users = await res.json();
  return <div>{/* 内容 */}</div>;
}

额外验证：确保API路由配置正确 #

如果确认错误来自API路由（概率极低），可在API路由文件中添加dynamic指令强制动态：

// /app/api/armies/route.js
export const dynamic = 'force-dynamic';

import { getUsers } from "@/backend/apiControllers/getUsers";
import { connectDB } from "@/backend/utils/dbConnect";
import { NextResponse } from "next/server";

export const GET = async (request) => {
  try {
    await connectDB();
    const users = await getUsers(request);
    return NextResponse.json(users);
  } catch (error) {
    console.log(error);
    return NextResponse.json({
      apiMessage: { errorMsg: "Internal Server Error, Please try again later" },
    });
  }
};

内容的提问来源于stack exchange，提问作者Md Injamul