Next.js 13开发服务器返回404及AWS Amplify构建失败求助

问题现象 #

• 本地执行npm run dev后终端显示编译成功，但浏览器访问http://localhost:3000出现Next.js默认404页面，控制台报错：GET http://localhost:3000/ 404 (Not Found)，报错源为on-demand-entries-client.js:49
• AWS Amplify构建失败，日志提示找不到.next/server/app目录，而项目的app目录实际位于src根目录下
• 故障随机触发，删除项目重建后暂时恢复，但修改Tailwind配置并重启服务器后问题复发

排查与解决方案 #

1. 确认Next.js配置对src/app目录的识别 #

Next.js 13.1+默认支持src/app作为App Router的根目录，需确保配置未冲突：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true, // 13.1+版本可省略，但旧版本需显式开启
  },
}

module.exports = nextConfig

2. 修复Tailwind配置的路径匹配问题 #

修改Tailwind配置后缓存异常可能导致构建路径错误，需：

• 确保tailwind.config.js的content字段正确覆盖src下的所有路由和组件文件：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 清理本地缓存后重启开发服务器：

rm -rf .next node_modules/.cache
npm run dev

3. 修正AWS Amplify的构建配置 #

• 构建命令使用标准的npm run build，避免自定义命令跳过关键步骤
• 添加构建前清理步骤，确保旧构建产物被清除：
  在Amplify构建设置的"Build command"中设置为：

  rm -rf .next && npm install && npm run build
  

• 检查Amplify的环境变量和目录权限，确保构建过程能读取src/app并生成.next/server/app目录

4. 验证App Router的基础结构要求 #

• 确保src/app目录下存在page.tsx（或page.jsx）文件，这是根路由的必需入口，缺失会直接导致404
• 检查项目目录权限，避免src/app或.next目录因权限问题无法读取/写入

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