Next.js静态网站Chunk加载404运行时错误求助

1. 检查Middleware的路径拦截逻辑 #

Middleware如果错误拦截静态资源请求，会直接导致chunk加载失败：

• 确保仅针对爬虫UA的请求做动态渲染转发，必须跳过/_next/static/开头的所有请求
• 修正示例：

export function middleware(request) {
  const userAgent = request.headers.get('user-agent') || '';
  const isBot = /bot|crawler|spider|googlebot|bingbot|yandexbot/i.test(userAgent);

  // 放行静态资源，避免chunk请求被拦截
  if (request.nextUrl.pathname.startsWith('/_next/static/')) {
    return NextResponse.next();
  }

  if (isBot) {
    // 你的爬虫动态渲染转发逻辑
    return NextResponse.rewrite(new URL('/api/render', request.url));
  }

  return NextResponse.next();
}

2. 验证静态生成与动态渲染的兼容性 #

如果你的项目是静态导出模式（output: 'export'），middleware的动态渲染逻辑可能和静态生成冲突：

• 检查next.config.js中output配置，确认是否误开启了动态渲染相关设置
• 执行npm run build后，查看.next/static/chunks目录，确认报错中提到的chunk文件是否存在
• 如果chunk缺失，排查新增SEO组件是否被错误标记为ssr: false的动态导入，导致静态生成时未打包该组件

3. 强制清理缓存并重建 #

• 删除.next目录、node_modules/.cache，重新执行npm install && npm run build
• 浏览器清除全部缓存（包括Service Worker），避免旧缓存资源干扰
• 开发环境启动时添加--no-cache参数：next dev --no-cache，禁用Next.js的开发缓存

4. 检查静态资源路径配置 #

• 确认next.config.js中的assetPrefix、basePath配置正确，不要导致静态资源路径前缀错误
• 如果设置了basePath，middleware的重写逻辑不要移除该前缀，确保静态资源请求路径正确

5. 排查样式失效根源 #

硬刷新后样式失效通常和样式文件加载失败有关：

• 检查浏览器网络请求中是否有/_next/static/css/开头的404请求，确认Tailwind/SCSS编译产物是否生成
• 核对tailwind.config.js的content配置，确保包含所有需要处理的组件路径，避免样式被PurgeCSS误删
• 检查SCSS模块的导入方式，避免动态导入样式导致的加载异常

6. 排查新增组件的导入问题 #

• 检查新增SEO组件是否使用了错误的动态导入方式，比如ssr: false导致静态生成时未包含对应chunk
• 确认爬虫动态渲染的页面是否正确复用原有组件，避免渲染时请求未生成的chunk文件

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