Next.js部署至GAE标准环境出现Chunk加载404错误求助

1. 修正app.yaml的路由规则 #

GAE标准环境的路由匹配容易拦截Next.js的chunk请求，得确保所有/_next/路径的请求都交给Next.js服务器处理，别当成静态资源。把app.yaml改成这样：

runtime: nodejs20 # 换成你用的Next.js兼容的Node版本
env: standard

handlers:
  # 让Next.js接管所有请求，包括/_next/路径
  - url: /.*
    script: auto

注意：之前如果加了/_next/的静态托管规则，直接删掉，防止冲突。

2. 排查动态路由的chunk解析问题 #

带@modal和[documentId]的路由属于Next.js的特殊结构（模态路由+动态路由），旧版本可能存在chunk命名解析bug。先做这两步：

• 本地执行next build后，去.next/static/chunks目录查看chunk文件名，确认是否包含路由里的特殊字符
• 部署后直接访问chunk的完整URL（比如https://你的应用ID.uc.r.appspot.com/_next/static/chunks/xxx.js），如果Next.js能返回文件，说明路由规则没问题；还是404的话，赶紧升级Next.js到稳定新版本（比如v13以上），同时检查部署时有没有设置正确的NEXT_PUBLIC_BASE_PATH（如果有自定义路径的话），避免chunk路径生成错误

3. 清除GAE缓存并确保构建唯一 #

GAE的静态资源缓存可能导致旧chunk路径残留，试试这两个操作：

• 部署时加--no-cache参数，避免GAE使用缓存的构建包：

gcloud app deploy --no-cache

• 在next.config.js里配置唯一构建ID，每次构建生成不同的chunk路径：

/** @type {import('next').NextConfig} */
const nextConfig = {
  generateBuildId: async () => {
    return `${Date.now()}`; // 用时间戳当唯一ID
  },
};

module.exports = nextConfig;

4. 查看GAE日志定位请求流向 #

去Google Cloud Console的App Engine日志页面，过滤包含/_next/static/chunks/的请求，看请求到底是被GAE静态服务拦截了，还是到了Next.js服务器。如果是被拦截，说明app.yaml的路由顺序有问题，把/.*的handler放在最前面（GAE按顺序匹配路由）。

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