启用appDir实验性标志时Next Build失败：PageNotFoundError问题

问题原因 #

你遇到的核心问题是路由路径错误，以及对appDir模式下路由规则和public目录的误解：

• public目录是用于存放静态资源（如图片、字体）的，它不会作为路由路径的一部分。开发模式下可能存在宽松的路径匹配导致/public/onboard能访问，但build时NextJS会严格校验路由规则，因此报错。
• appDir模式下，路由是基于app目录下的文件夹结构自动生成的，比如app/onboard/page.tsx对应的路由是/onboard，而非/public/onboard。

解决方案 #

1. 修正访问路径
   开发时直接访问 localhost:3000/onboard，而不是带/public的路径。

2. 确认页面文件命名与目录结构
   确保你的页面文件命名为page.tsx（appDir模式下必须用这个文件名作为页面入口），目录结构应为：

   app/
     layout.tsx
     onboard/
       layout.tsx
       page.tsx  // 这里放置你的Onboard组件代码
   

3. 检查next.config.js配置
   确保已正确启用appDir：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     experimental: {
       appDir: true,
     },
   }
   
   module.exports = nextConfig
   

4. 重新执行构建
   执行next build，此时应该不会再出现找不到页面的错误。

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