Next.js应用中动态导入组件的Chunk以HTTP而非HTTPS加载问题求助

问题背景 #

近期更新包含Node应用与Next.js应用的Turborepo依赖包后，部署发现部分使用next/dynamic且ssr: false的组件对应的Chunk文件，通过HTTP而非HTTPS加载，引发混合内容错误。改用静态导入可临时解决，但此前无此问题，未找到公开相关案例。

依赖版本：

"dependencies": {
  "axios": "1.7.2",
  "next": "14.2.5",
  "next-i18next": "15.3.0",
  "next-optimized-images": "2.6.2",
  "next-pwa": "5.6.0",
  "nextjs-plugin-minify-css-classname": "0.0.5",
  "react": "18.3.1",
  "react-dom": "18.3.1",
  "react-error-boundary": "4.0.13",
  "react-redux": "9.1.2",
  "redux-persist": "6.0.0",
  "socket.io-client": "4.7.5",
  "swr": "2.2.5",
  "tailwindcss": "3.4.4",
  "webpack": "5.93.0",
  "workbox-core": "7.1.0",
  "workbox-precaching": "7.1.0",
  "workbox-recipes": "7.1.0",
  "xss": "1.0.15"
}

排查与解决方案 #

1. 修正Next.js assetPrefix配置

assetPrefix决定了静态资源的加载前缀，若硬编码HTTP地址或未适配生产环境HTTPS，会直接导致Chunk协议错误：

• 打开next.config.js，配置动态适配环境的前缀：

module.exports = {
  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://你的域名.com' : '',
  // 或使用相对协议：'//你的域名.com'，自动适配当前页面的HTTP/HTTPS协议
}

• 若使用CDN，需确保CDN地址为HTTPS协议。

2. 排查Next-PWA插件的路径配置

next-pwa在生成Service Worker缓存清单时，可能因路径配置错误导致资源加载协议异常：

• 临时注释next.config.js中的next-pwa配置，重新部署验证问题是否消失，确认是否为该插件导致。
• 若确认是插件问题，检查publicExcludes、runtimeCaching等配置项，确保资源路径未硬编码HTTP。

3. 验证Webpack publicPath设置

手动修改Webpack配置时，publicPath的协议错误会引发该问题：

• 检查next.config.js中的Webpack配置：

module.exports = {
  webpack: (config) => {
    config.output.publicPath = process.env.NODE_ENV === 'production' 
      ? 'https://你的域名.com/_next/' 
      : '/_next/';
    return config;
  },
}

4. 检查环境变量与第三方依赖配置

部分依赖（如next-i18next）会读取环境变量中的域名配置，若变量为HTTP地址会导致资源路径错误：

• 确认生产环境的NEXT_PUBLIC_DOMAIN等相关变量为HTTPS协议地址。
• 检查next-i18next的配置文件，确保localePath等路径未硬编码HTTP。

5. 确认反向代理/CDN的协议转发

若应用部署在Nginx、Cloudflare等代理后，需确保代理正确传递协议头，Next.js会根据X-Forwarded-Proto自动适配资源协议：

• Nginx配置中添加：

proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;

• CDN端需启用HTTPS转发，并确保X-Forwarded-Proto头正确传递给后端。

6. 回滚依赖定位问题根源

由于问题出现在依赖更新后，可逐步回滚核心依赖排查：

• 优先回滚next、next-pwa、webpack这类直接影响打包的依赖，例如：

npm install next@14.2.4 # 回滚到上一个稳定版本

• 每次只回滚一个依赖，部署后测试是否解决问题，定位具体触发问题的包。

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