Next.js 13部署AWS后动态路由ChunkLoadError问题求助

问题概述 #

Next.js 13 App Router项目本地测试正常，部署到AWS后，/blog/[slug]动态路由页面触发ChunkLoadError，本地构建生成的.next\static\chunks\app\blog\[slug]\not-found-xxx.js文件在服务器构建产物中缺失。

排查与解决方案 #

1. 确认构建与部署完整性 #

• 检查AWS构建命令是否为npm run build，确保构建过程无中断，查看构建日志确认not-found相关chunk是否被生成。
• 验证部署工具是否完整上传了.next/static/chunks/app/blog/[slug]/目录下的所有文件。部分部署工具会对带方括号的路径处理异常，需确保部署配置未排除这类路径。

2. 显式定义not-found页面 #

Next.js 13中依赖notFound()触发的内置404页面，在SSG模式下可能出现chunk生成异常。在/src/app/blog/[slug]/目录下创建单独的not-found.tsx文件，显式定义404页面：

// src/app/blog/[slug]/not-found.tsx
import Link from 'next/link';

export default function NotFound() {
  return (
    <article className="mx-auto mt-40 text-center">
      <h2 className="mb-4 text-3xl font-bold">Post Not Found</h2>
      <Link href="/blog">
        <span className="mr-2">&larr;</span>
        <span>Go to list page</span>
      </Link>
    </article>
  );
}

构建时会专门生成该页面的chunk，避免依赖自动生成的chunk出现部署问题。

3. 检查generateStaticParams执行逻辑 #

• 确认AWS构建环境中，getAllPostsFromNotion()能正常获取数据。如果构建环境无Notion API访问权限、环境变量配置错误，会导致generateStaticParams执行失败，静态页面未生成，进而触发chunk加载错误。查看构建日志中该函数的执行状态。

4. 处理CDN缓存问题 #

若使用CloudFront等CDN：

• 刷新CDN缓存，避免缓存旧的chunk路径映射。
• 配置CDN缓存规则：对.next/static/下带哈希的文件设置长期缓存，对路由相关文件设置短缓存或不缓存。

5. 统一Next.js版本与检查构建配置 #

• 确保本地与服务器的Next.js版本一致，在package.json中锁定版本号，避免构建时安装差异版本。
• 若使用output: 'standalone'配置，确认部署时完整复制了.next/static目录下的静态资源，standalone模式生成的精简服务器依赖这些静态文件。

6. 修正Link组件属性 #

Next.js 13 App Router中已废弃as属性，移除PostCard中Link的as参数，避免路由解析异常：

// 替换原Link组件
<Link href={`/blog/${slug}`}>
  {/* ... 原有内容 ... */}
</Link>

7. 检查服务器日志 #

查看AWS服务器的应用日志，确认访问动态路由时是否有文件缺失的报错，定位是构建未生成、部署未上传，还是服务器权限问题导致无法读取文件。

内容的提问来源于stack exchange，提问作者aleksei.m