如何在cPanel中部署使用App Router的NextJS 13应用？

一、项目配置调整 #

1. 开启 NextJS Standalone 模式 #

在项目根目录的next.config.js中添加output: 'standalone'配置，这是官方针对非Vercel平台部署App Router的核心设置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  // 保留你原有的其他配置
}

module.exports = nextConfig

2. 更新 package.json 脚本 #

无需额外创建server.js，直接修改package.json的脚本为：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "node .next/standalone/server.js"
  }
}

二、本地构建并上传文件 #

1. 在本地执行npm run build，完成后项目根目录会生成.next/standalone、.next/static、public这些关键目录。
2. 通过cPanel文件管理器或FTP，将以下文件/目录上传到网站根目录（如public_html）：
   • .next/standalone
   • .next/static
   • public
   • package.json
   • package-lock.json（或yarn.lock）

三、cPanel Node.js 应用配置 #

1. 登录cPanel，找到Node.js 应用管理器。
2. 点击创建应用，按以下配置填写：
   • 应用根目录：选择你上传文件的目录（如public_html）
   • 启动文件：填写.next/standalone/server.js
   • Node.js版本：选择与本地开发一致的18.x及以上版本（NextJS 13最低要求）
   • 应用URL：设置你的域名或子域名
3. 点击创建后，等待部署完成，再点击启动按钮。

四、配置反向代理（.htaccess） #

在网站根目录创建或修改.htaccess文件，添加以下内容（替换PORT为cPanel Node.js应用分配的端口号，可在应用详情页查看）：

RewriteEngine On
RewriteRule ^(.*)$ http://localhost:PORT/$1 [P,L]

常见问题排查 #

• 若启动失败，查看Node.js应用管理器的错误日志，大概率是依赖未安装，可通过cPanel终端执行npm install补全依赖。
• 静态资源加载失败时，检查.next/static和public目录权限为755，文件权限为644。
• 确保使用NextJS 13.2及以上版本，早期版本的App Router对standalone模式支持不完善。

内容的提问来源于stack exchange，提问作者Santiago Baron Zuleta