Next.js+Django站点部署Heroku后静态脚本加载失败页面空白

控制台抛出的核心报错：
Error rendering page: Error: Failed to load script: /_next/static/chunks/pages/_error-2280fa386d040b66.js

相关环境与现象：

• 项目技术栈为Next.js、Django与PostgreSQL
• 本地环境运行无异常，部署到Heroku平台后页面加载中途变为空白，Chrome控制台弹出上述报错
• 已部署站点地址：favourndubuisi.herokuapp.com
• 静态目录参考截图：
  

按以下优先级逐一排查即可解决问题：

• 校验Heroku端构建产物完整性
  • 执行heroku run bash登录线上实例，进入项目部署目录，查看/_next/static/chunks/pages/路径下是否存在_error-2280fa386d040b66.js文件。如果文件不存在，说明构建环节出错：
    • 检查package.json中的build脚本是否为next build，确认Heroku部署时会自动执行该构建命令
    • 检查项目根目录的.slugignore文件，确认没有配置规则排除_next目录下的chunk文件
    • 不要在构建流程中加入多余的静态文件清理命令，避免构建生成的js资源被误删
• 修正Django静态路由配置
  • 这类前后端同栈部署的场景，90%的同类报错是Django没有正确转发/_next/开头的静态资源请求，导致js文件请求返回404或Django默认错误页，浏览器无法解析合法js内容就会触发加载失败。本地开发时Next.js自带dev server会处理静态资源，所以不会出现该问题。
  • 在Django的urls.py中新增静态资源匹配规则，将/_next/路径的请求直接指向Next.js构建生成的静态目录，参考配置：

    from django.urls import re_path
    from django.views.static import serve
    from django.conf import settings
    
    urlpatterns = [
        # 原有业务路由保持不变
        re_path(
            r"^_next/(?P<path>.*)$",
            serve,
            {"document_root": settings.BASE_DIR / ".next"},
        ),
    ]
    

  • 确认settings.py中DEBUG=False时，静态文件服务权限已放开，不会拦截/_next/路径的请求
• 调整Heroku构建包顺序
  • 同时使用Node.js和Python构建包时，必须保证Node.js构建包顺序在Python构建包之前：先执行next build生成完整静态产物，再执行Django的静态资源收集、服务启动流程。顺序颠倒时，Django收集静态资源阶段Next.js产物还未生成，会导致静态js文件缺失。
  • 执行heroku buildpacks可查看当前构建包顺序，顺序不符直接调整即可
• 校验Next.js资产路径配置
  • 检查next.config.js中的assetPrefix配置，确认线上环境该配置值和实际静态资源访问路径完全匹配。本地运行正常的情况下，不要随意添加多余的资产前缀配置，避免请求路径和实际文件路径不匹配。

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