动态服务器错误：动态服务器使用：NEXTJS 13.3中的标头

Question

我在将我的电子商务 Nextjs13 应用程序部署到 Vercel 时遇到了问题。应用程序在本地环境中运行良好，但在托管时出现了以下错误。

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'
}

这是我正在做的事情，

我有一个仪表板页面，在那里我获取所有类别数据并将其设置在redux存储中，然后在子组件中获取该数据并在数据表中显示它。

这是我的代码

/api/Admin/category/getCategory

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!' });
  }
}

管理后台页面

"use client"
import Cookies from 'js-cookie'
import { useRouter } from 'next/navigation'
import React, { useEffect } from 'react'
import AdminNavbar from '@/components/AdminNavbar';
import AdminSidebar from '@/components/AdminSidebar';
import SuperComponent from '@/components/SuperComponent';
import { ToastContainer, toast } from 'react-toastify';
import useSWR from 'swr'
import { get_all_categories } from '@/Services/Admin/category';
import { useDispatch } from 'react-redux';
import { setCatLoading, setCategoryData } from '@/utils/AdminSlice';


interface userData {
  email: String,
  role: String,
  _id: String,
  name: String
}



export default function Dashboard() {
  const Router = useRouter();
  const dispatch  = useDispatch();
  
  useEffect(() => {
    const user: userData | null = JSON.parse(localStorage.getItem('user') || '{}');
    if (!Cookies.get('token') || user?.role !== 'admin') {
      Router.push('/')
    }
  }, [])



  const { data : categoryData , isLoading : categoryLoading } = useSWR('/gettingAllCategoriesFOrAdmin', get_all_categories)
  if (categoryData?.success  !== true) toast.error(categoryData?.message)

  useEffect(() => {
   dispatch(setCategoryData(categoryData?.data))
    dispatch(setCatLoading(categoryLoading))

  }, [categoryData , dispatch , categoryLoading])
 


  return (
    <div className='w-full h-screen flex  bg-base-200 overflow-hidden'>
      <AdminSidebar />
      <div className='w-full h-full '>
        <AdminNavbar />
        <div className='w-full h-5/6  flex flex-wrap items-start justify-center overflow-y-auto  px-4 py-2'>
         <SuperComponent />
        </div>
      </div>
      <ToastContainer />
    </div>
  )
}

- Dev.moiz

Answer 1

我通过在我的 API 路由文件中添加 export const dynamic = 'force-dynamic' 来解决了这个错误。

- Dev.moiz

---

这个解决方案修复了构建错误，但路由没有工作。 - Forbidden

请详细说明您遇到的问题，就我个人而言，在本地开发中我的路由和应用程序都运行良好，但是当我将代码推送到生产环境时，一些路由会抛出上述错误，因此我进行了搜索并找到了上述修复方法。 - Dev.moiz

错误已经被解决了，只是忘记了我是怎么做的。 - Forbidden

添加export const revalidate = 0;也解决了我的问题。 - Vadim Yakhin