DynamicServerError: Dynamic server usage: headers in NEXTJS 13.3

Question

I'm Facing an issue while deployment of my Ecommerce Nextjs13 App on Vercel. Application works fine in local Environment but while hosting I got an error listed Below

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

Here's is What I am doing ,

I have a Dashboard Page , Where I fetch all categories data and then set it in redux store , then In child component i get that data and display it in datatables

这是我的代码

/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>
  )
}

Answer 1

我通过添加修复了这个错误

在我的 Api 路由文件中导出 const dynamic = 'force-dynamic'