CPanel部署NextJS静态导出站点：JS Chunk、CSS及SVG加载失败求助

问题描述 #

使用Next.js生成静态站点并部署到CPanel时出现以下异常：

• JS Chunk、SVG文件及子页面返回404未找到错误
• 部分资源存在MIME类型不匹配问题
• 本地通过VSCode Live Server托管静态文件时运行正常，但部署到CPanel后故障出现
• next build构建过程无报错，且此前相同导出方式可正常工作

部署操作 #

1. 执行next build生成build文件夹
2. 将build文件夹内所有内容上传至CPanel的public_html根目录

补充信息 #

• 在线站点控制台可查看具体错误
• 项目代码已开源
• 已提供Next.js构建成功截图、站点错误截图及next.config.js文件截图

解决方案 #

1. 配置CPanel URL重写规则 #

静态导出的Next.js站点需要适配单页应用路由，在public_html目录下创建/修改.htaccess文件，添加以下规则：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

该规则会将非文件/目录的请求转发到index.html，同时保证静态资源正常访问。

2. 检查Next.js路径配置 #

打开next.config.js，确认basePath和assetPrefix未被错误设置（根目录部署需保持默认）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // 确保以下两行注释或为空
  // basePath: '/your-subpath',
  // assetPrefix: '/your-subpath',
}

module.exports = nextConfig

3. 修正文件权限 #

通过CPanel文件管理器设置正确权限：

• 文件权限设为644
• 文件夹权限设为755
  错误权限会导致服务器无法读取资源，引发404或MIME类型异常。

4. 验证资源上传完整性 #

检查public_html目录下的_next/static/（JS chunk）、public/（SVG等静态资源）是否与本地build文件夹内容一致，避免上传遗漏或路径错误。

5. 清除缓存 #

• 强制刷新浏览器（Ctrl+Shift+R）清除本地缓存
• 若站点使用CDN，同步清除CDN缓存

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