如何将带动态路由的Next.js 14应用部署至Hostinger并确保运行正常？

1. 调整Next.js配置（关键：禁用静态导出） #

你之前生成out文件夹是因为开启了静态导出模式，这种模式不支持动态路由的服务器端处理。修改项目根目录的next.config.js：

• 移除output: 'export'配置项（如果存在）
• 推荐添加output: 'standalone'，让Next.js生成独立可执行包，减少部署依赖体积：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  // 保留你的其他配置（如images、env等）
}

module.exports = nextConfig

2. 构建应用 #

在本地项目根目录执行构建命令：

npm run build

构建完成后会生成.next文件夹，启用standalone的话，.next/standalone目录会包含完整的运行环境。

3. 上传文件到Hostinger #

方式一：FTP/文件管理器上传 #

将以下文件/文件夹上传到Hostinger的网站根目录（如public_html）：

• .next/standalone 文件夹
• .next/static 文件夹
• public 文件夹
• package.json 和 package-lock.json（npm用户）或yarn.lock（yarn用户）

方式二：Git部署（更便捷） #

在Hostinger面板开启Git部署功能，将项目代码推送到Hostinger提供的Git仓库，设置构建命令为npm run build，平台会自动完成构建与部署。

4. 配置Hostinger Node.js环境 #

1. 登录Hostinger面板，找到高级工具下的Node.js
2. 创建新的Node.js应用：
   • 选择Node.js v18+版本（Next.js 14推荐版本）
   • 设置应用根目录为你上传文件的路径（如public_html）
   • 设置启动命令：启用standalone则用node .next/standalone/server.js；未启用则用npx next start -p [Hostinger分配的端口]
3. 保存配置并启动Node.js应用

5. 配置反向代理与域名 #

1. 在Hostinger域名管理中，确保域名解析指向当前服务器IP
2. 进入网站 -> 反向代理设置：
   • 目标URL填写http://localhost:[你的Node.js应用端口]
   • 保存后，域名会自动转发到Next.js应用

6. 验证功能 #

• 访问域名测试动态路由（如/news/[id]）是否正常加载内容
• 测试新闻上传后端：若为Next.js API路由，检查/api/upload类接口是否能正常接收请求；若为外部后端，确认CORS配置允许当前域名访问，或后端已部署在Hostinger并配置正确路径

常见问题排查 #

• 动态路由404：检查是否已移除静态导出配置、Node.js应用是否正常启动、启动命令是否正确
• 后端接口报错：检查Hostinger面板中环境变量是否配置正确、端口是否开放、API路由代码是否存在逻辑错误
• 页面加载慢：在动态路由页面添加增量静态再生（ISR）配置，比如：

export const revalidate = 86400; // 每天自动重新生成页面

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