Next.js开发正常但构建时预渲染页面报错的排查与解决

问题现象 #

开发模式下应用运行完全正常，但尝试构建生产版本时出现报错，具体报错信息：

▲ Next.js 14.1.3
   - Environments: .env

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
   Generating static pages (0/13)  [    ]TypeError: Cannot read properties of undefined (reading 'data')
    at u (C:\Users\kuzey\Desktop\Desktop\ForMe\WEBFOLDERS\Projects\x\.next\server\chunks\923.js:1:10734)
    at i (C:\Users\kuzey\Desktop\Desktop\ForMe\WEBFOLDERS\Projects\x\.next\server\chunks\309.js:1:7174)
    at em (C:\Users\kuzey\Desktop\Desktop\ForMe\WEBFOLDERS\Projects\x\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:131226)
    at C:\Users\kuzey\Desktop\Desktop\ForMe\WEBFOLDERS\Projects\x\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:142926)
    at Array.toJSON (C:\Users\kuzey\Desktop\Desktop\ForMe\WEBFOLDERS\Projects\x\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:146504)
    at stringify (<anonymous>)
    at eR (C:\Users\kuzey\Desktop\Desktop\ForMe\WEBFOLDERS\Projects\x\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:134889)
    at eP (C:\Users\kuzey\Desktop\Desktop\ForMe\WEBFOLDERS\Projects\x\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:135332)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at Timeout._onTimeout (C:\Users\kuzey\Desktop\Desktop\ForMe\WEBFOLDERS\Projects\x\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:146956)

Error occurred prerendering page "/register". Read more: https://nextjs.org/docs/messages/prerender-error

问题定位 #

排查后发现问题出在AuthLayout组件中，注释掉调用auth()的代码段后，构建可正常完成，组件代码如下：

import { auth } from '@/lib/auth';
import { redirect } from 'next/navigation';

const AuthLayout = async ({ children }: { children: React.ReactNode }) => {
  // const session = await auth();

  // if (session) {
  //   redirect('/home');
  // }
  return (
  // ...
  );
};

export default AuthLayout;

解决方法 #

在layout.tsx文件开头添加以下代码后，报错消失：

export const dynamic = 'force-dynamic'

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