nextjs 13generateStaticParams 与 next/header 一起使用会导致开发模式下出现未处理的运行时错误

Question

nextjs 13generateStaticParams 与 next/header 一起使用会导致开发模式下出现未处理的运行时错误

Jih*_*hoi 5 next.js next-auth react-server-components

我正在开发一个新项目，最近在我的前端应用程序中使用了 nextjs13。

\n

当函数generateStaticParams与next/header库函数headers()一起使用时，

\n

我在开发模式下遇到错误。

\n

\n
未处理的运行时错误 - 动态服务器使用：标头
\n

\n

开发模式期间发生错误的屏幕截图

\n

但是当前端使用下一个构建/下一个启动时，不会出现错误。

\n

我使用 next/header 库的主要原因是为了获得对 cookie 的访问权限。

\n

generateStaticParams在app/detail/[questionId]/page.tsx文件中\next/headers 在app/layout.tsx文件中

\n

应用程序/page.tsx

\n

import React from "react";\nimport QuestionCard from "../components/Card/QuestionCard";\nimport Carousel from "../components/Carousel/Carousel";\nimport HomeNavBar from "../components/HomeNavBar/HomeNavBar";\nimport { ICarousel } from "../types/carousel";\nimport TabNavigator from "../components/TabNavigator/TabNavigator";\n\nconst getGoogleSession = async () => {};\n\nconst getQuestionList = async () => {\n  const response = await fetch(`https://pioneroroom.com/questionlist`);\n  const data = await response.json();\n  return data;\n};\n\nconst page = async ({ Question }: any) => {\n  // const imageArr = await getCarouselImages();\n  const data = await getQuestionList();\n\n  return (\n    <div className="main">\n      <HomeNavBar />\n      {/* <Carousel carousel={imageArr} /> */}\n      <div className="contentbody">\n        {data.data.map((e: any) => {\n          return <QuestionCard key={e.questionId} question={e} />;\n        })}\n      </div>\n\n      <TabNavigator activeLink={""} />\n    </div>\n  );\n};\n\nexport default page;\n\n

Run Code Online (Sandbox Code Playgroud)\n

应用程序/布局.tsx

\n

import { Roboto, Noto_Sans_KR } from \'@next/font/google\';\nimport NavBar from \'../components/HomeNavBar/HomeNavBar\';\nimport \'../styles/globals.css\';\n\nimport SessionContainer from \'../components/Providers/SessionProvider\';\nimport \'../styles/globals.css\';\nimport { unstable_getServerSession } from \'next-auth\';\nimport { getSession } from \'../utils/helper/session\';\nimport { cookies, headers } from \'next/headers\';\nimport HomeNavBar from \'../components/HomeNavBar/HomeNavBar\';\nimport TabNavigator from \'../components/TabNavigator/TabNavigator\';\n\nconst noto = Noto_Sans_KR({\n    weight: \'400\',\n    fallback: [\'Roboto\'],\n    subsets: [\'latin\'],\n});\n\nconst RootLayout = async ({ children }: any) => {\n    const { segment } = children.props.childProp;\n    const session = await getSession(headers().get(\'cookie\') ?? \'\');\n    const nextCookies = cookies();\n    return (\n        <html className={noto.className}>\n            <head>\n                <meta name="viewport" content="width=device-width,initial-scale=1" />\n                <title>asdf</title>\n            </head>\n            <body>\n                <SessionContainer session={session}>{children}</SessionContainer>\n            </body>\n        </html>\n    );\n};\n\nexport default RootLayout;\n\n

Run Code Online (Sandbox Code Playgroud)\n

应用程序/详细信息/[questionId]/page.tsx

\n

import { headers } from \'next/headers\';\nimport React, { use } from \'react\';\nimport { getSession } from \'../../../utils/helper/session\';\n\nconst fetchPost = async (id: any) => {\n    const res = await fetch(`https://pioneroroom.com/questionlist/${id}`);\n    return await res.json().then((res) => res.data);\n};\n\nconst DetailIdPage = async ({ params }: any) => {\n    console.log(\'params.questionId\', params.questionId);\n    const post = await fetchPost(params.questionId);\n    return (\n        <div>\n            <p>{JSON.stringify(post)}</p>\n        </div>\n    );\n};\n\n// BUG: generateStaticParams \xed\x95\xa8\xec\x88\x98\xea\xb0\x80 \xed\x98\x84\xec\x9e\xac dev \xeb\xaa\xa8\xeb\x93\x9c\xec\x97\x90\xec\x84\x9c \xeb\x8f\x99\xec\x9e\x91\xed\x95\x98\xec\xa7\x80 \xec\x95\x8a\xec\x9d\x8c.\n// dynamic headers( next/headers )\xec\x9d\x98 cookie\xeb\x93\xb1\xec\x9d\x84 \xeb\xb6\x88\xeb\x9f\xac\xec\x98\xac \xeb\x95\x8c \xec\x98\xa4\xeb\xa5\x98\xeb\xa5\xbc \xec\x9d\xbc\xec\x9c\xbc\xed\x82\xa4\xea\xb3\xa0,\n// dev mode\xec\x97\x90\xec\x84\x9c \xec\x9d\xb4 \xed\x95\xa8\xec\x88\x98\xec\x99\x80 \xea\xb2\xb0\xed\x95\xa9\xed\x95\x98\xec\x97\xac \xec\x82\xac\xec\x9a\xa9\xed\x95\x98\xeb\xa9\xb4 dynamic server usage: headers error \xeb\xb0\x9c\xec\x83\x9d\xed\x95\xa8.\n/*\nexport async function generateStaticParams() {\n    const res = await fetch(\'https://pioneroroom.com/questionlist\');\n    const data = await res.json();\n    const arr = data.data.map((e: any) => {\n        console.log(\'map\', e.questionId);\n        return {\n            questionId: String(e.questionId),\n        };\n    });\n    return arr;\n}\n*/\n\nexport default DetailIdPage;\n\n

Run Code Online (Sandbox Code Playgroud)\n

删除这两个代码(generateStaticParams or next/header)即可解决问题。开发模式下没有发生错误。

\n

Answer 1

Ben*_*ack 3

我用来阻止这些错误发生的解决方法是在开发模式下完全关闭静态渲染。（但将其保留在产品中）

在您要从中导出generateStaticParams()的文件中添加以下内容：

// what used to be export function generateStaticParams
function staticParams(){
...
}

// fix "dynamic server usage" errors in dev mode by turning off static generation and forcing dynamic rendering
export const generateStaticParams =  process.env.NODE_ENV === "production" ? staticParams :  undefined;
export const dynamic =  process.env.NODE_ENV === "production" ? 'auto' : 'force-dynamic';

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，2 月前
查看次数：	2786 次
最近记录：	2 年，7 月前