在使用 App Router 的 Next.js 13 中，为什么我无法使用“使用客户端”导出动态路由？

Question

我将 Next.js 13 与 App Router 结合使用，并有一个使用动态路由的页面。当我在本地运行服务器（localhost:3000//tickets/2例如）时，它运行良好，但当我尝试通过 导出静态站点时，它会失败并出现预渲染错误npm run build。

Error occurred prerendering page "/tickets/[id]". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading 'id')

一些注意事项：

• 我"use client"在页面顶部有。据我了解，如果我使用钩子，这是必需的useState。
• 如果我删除"use client"所有状态管理内容，npm run build则可以顺利导出所有内容（即 Nextjs 为每个票证 ID 构建一个静态页面，如 /tickets/1、tickets/2 等）。

我不知道为什么我无法useState在通过动态路由访问的页面上导出静态站点。这是我的设置，仅包含相关部分：

next.config.js

Error occurred prerendering page "/tickets/[id]". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading 'id')

应用程序/门票/[id]/page.js

module.exports = {
  output: "export",
  images: {
    unoptimized: true,
  }
};;

Answer 1

尝试将客户端组件移出page.js并导入它。

generateStaticParams客户端组件不支持，但在服务器组件中导入客户端组件是可以的。

票务.js

"use client"

// ..imports

export default function Ticket({ params }) {
  const { id } = params;
  const ticket = TICKETS[id];
  const [status, setStatus] = useState(ticket.status);

  return (
    <div>
      <h1>{ticket.id}</h1>
      <Select
        onValueChange={(e) => {
          setStatus(e);
        }}
        value={status}
      />
    </div>
  );
}

页面.js

import Ticket from "./ticket";

// ...

// Dynamic routes; create a page for each ticket ID
export async function generateStaticParams() {
  return TICKETS.map((ticket) => ({
    id: `${ticket.id}`,
  }));
}

export default function Page({ params }) {
  return <Ticket id={params.id}>;
}

参考

• https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#interleaving-server-and-client-components