在cPanel部署Next.js应用时，_next目录资源加载失败求助

核心问题分析 #

你遇到的情况是Next.js生成的HTML里硬编码了/_next/作为静态资源前缀，但cPanel环境下实际静态资源存放在.next/目录，导致路径不匹配。修改distDir没用是因为这个配置只控制build输出的目录名，不影响HTML里的资源引用路径。

具体解决步骤 #

• 配置Next.js的资源前缀
  在next.config.js中添加assetPrefix配置，让资源路径使用相对路径或正确的服务器路径：

  module.exports = {
    // 如果应用部署在域名根目录，用相对路径即可
    assetPrefix: './',
    // 如果是子目录部署（比如https://my.domain.com/my-app），则指定前缀
    // assetPrefix: '/my-app',
  }
  

  重新执行npm run build后，HTML里的资源路径会变成相对路径，自动适配服务器上的实际文件位置。

• 设置cPanel的重写规则（替代手动移动文件）
  如果你不想修改Next.js配置，可以通过.htaccess重写规则映射路径：

  1. 进入cPanel的「文件管理器」，找到域名对应的文档根目录（一般是public_html）。
  2. 编辑或新建.htaccess文件，添加以下规则：

     RewriteEngine On
     # 把/_next/开头的请求转发到/.next/目录
     RewriteRule ^_next/(.*)$ /.next/$1 [L]
     

     这样用户请求/_next/路径时，服务器会自动去.next/目录查找资源，无需手动复制文件。

• 检查cPanel Node.js应用的基础配置

  • 确认「应用根目录」指向你的Next.js项目根目录（不是.next目录）。
  • 「Build Command」设置为npm run build，确保每次部署都会自动生成最新的.next目录。
  • 不要手动重命名.next为_next，因为下次build会重新生成.next，之前的修改会被覆盖，这就是你调整目录名称没彻底解决问题的原因。

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