跟着Next.js教程实现部分预渲染时遇TypeScript错误的原因

问题背景 #

正在跟随Next.js官方Dashboard教程实现部分预渲染（Partial Prerendering），在app/dashboard/layout.tsx文件中添加experimental_ppr导出时，触发TypeScript错误：

"experimental_ppr" is not a valid Next.js entry export value.ts(71002)

问题原因 #

这个错误并非教程逻辑错误，而是Next.js版本迭代中PPR的启用方式发生了变更：早期版本支持在layout/page组件中通过export const experimental_ppr = true;开启PPR，但后续版本将该配置迁移到了项目根目录的next.config.js/next.config.ts中，组件导出的方式已被废弃，因此TypeScript会抛出无效导出的错误。

解决方案 #

1. 移除app/dashboard/layout.tsx中所有与experimental_ppr相关的导出代码，比如删除：

export const experimental_ppr = true;

2. 在项目根目录的配置文件中开启PPR：
   • 若使用JavaScript配置（next.config.js）：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     experimental: {
       ppr: 'incremental' // 可选值：'true'（全量启用）、'incremental'（增量启用）
     }
   }
   
   module.exports = nextConfig
   

   • 若使用TypeScript配置（next.config.ts）：

   import type { NextConfig } from 'next'
   
   const nextConfig: NextConfig = {
     experimental: {
       ppr: 'incremental'
     }
   }
   
   export default nextConfig
   

3. 重启Next.js开发服务器，让新配置生效。

补充说明 #

若教程后续步骤仍提及组件导出experimental_ppr，请以最新的Next.js官方配置方式为准，因为PPR作为实验特性，其启用方式可能随版本更新调整。

内容的提问来源于stack exchange，提问作者ajv-2005