求助：在Hostinger共享主机部署Next.js v13.5.3（App Router）项目

前提确认 #

Hostinger共享主机支持Node.js 18+版本，Next.js 13.5.3要求Node.js ≥18.17.0，先在hPanel的「Node.js管理」中切换到对应版本。

分场景部署方案 #

根据你的动态路由和数据读取需求，分两种场景处理：

场景1：静态生成（SSG/ISR）推荐共享主机使用

如果你的动态路由可以预生成静态页面，或者支持增量静态再生，优先用这种方式，避免运行Node服务的限制：

1. 项目配置调整
   在next.config.js中添加静态导出配置：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     output: 'export',
     // 可选：如果域名带子目录，配置basePath
     // basePath: '/your-subdirectory',
   }
   module.exports = nextConfig
   

2. 预生成动态路由
   在动态路由的page.js中使用generateStaticParams函数，基于JSON数据生成所有动态路径：

   // app/[itemId]/page.js
   import fs from 'fs/promises';
   import path from 'path';
   
   export async function generateStaticParams() {
     // 读取本地JSON文件
     const jsonPath = path.join(process.cwd(), 'data', 'items.json');
     const items = JSON.parse(await fs.readFile(jsonPath, 'utf8'));
     // 返回所有动态路由参数
     return items.map(item => ({ itemId: item.id.toString() }));
   }
   
   export default function ItemPage({ params }) {
     // 业务逻辑
   }
   

3. 本地构建
   运行npm run build，项目根目录会生成out文件夹，包含所有静态文件。
4. 上传部署
   用FTP或Hostinger文件管理器，将out文件夹内的所有文件上传到主机的public_html目录下即可。

场景2：服务器端渲染（SSR）

如果动态路由必须实时生成（无法预生成），需要在Hostinger上运行Next.js服务器：

1. 项目配置
   无需修改next.config.js的output配置，保持默认即可。
2. 本地构建
   运行npm run build，生成.next文件夹。
3. 上传文件
   将项目根目录下的所有文件（除node_modules）上传到主机的非public_html目录（比如next-app文件夹），然后在该目录下通过Hostinger终端执行npm install（避免本地安装的兼容性问题）。
4. 配置Node.js应用
   在hPanel的「Node.js管理」中，创建新的Node.js应用：
   • 选择项目所在目录（比如next-app）
   • 设置启动脚本为npm run start（或直接填npx next start）
   • 环境变量添加NODE_ENV=production
     保存后Hostinger会自动启动Next.js服务器，并将域名反向代理到该服务。

读取JSON文件的注意事项 #

• 静态生成场景：如果JSON文件不需要实时更新，建议在generateStaticParams或组件中直接读取本地文件，构建时嵌入到静态页面；如果需要实时读取，将JSON文件放到public目录下，通过前端请求获取。
• SSR场景：读取本地JSON文件时，务必使用process.cwd()拼接绝对路径，避免路径错误：

  const jsonData = JSON.parse(await fs.readFile(path.join(process.cwd(), 'data', 'config.json'), 'utf8'));
  

常见问题排查 #

• 权限错误：确保主机上的项目文件权限为755（文件夹）和644（文件），可通过文件管理器批量修改。
• 路由404：静态生成场景下，未预生成的动态路由会返回404，需确保generateStaticParams覆盖所有可能的路径；SSR场景下，检查Node.js应用是否正常启动，可通过Hostinger终端查看日志。
• 缓存问题：部署后静态资源未更新，可在hPanel的「缓存管理」中清除网站缓存，或在next.config.js中配置资源哈希。

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