在Hostinger部署Next.js静态站点后非首页刷新404问题排查

核心原因 #

当你用output: 'export'导出Next.js为静态文件后，网站本质是客户端路由的单页应用（SPA）：

• 首次访问页面时，浏览器加载index.html，由Next.js的客户端路由接管页面跳转；
• 刷新非首页时，浏览器会直接向Hostinger服务器请求对应路由的物理文件（比如访问/about会请求/about.html或/about/index.html），但如果服务器没有配置路由 fallback 规则，且对应物理文件不存在（或服务器未正确映射），就会返回404错误。

调试与解决步骤 #

1. 检查静态导出文件结构 #

先确认out目录的文件结构是否符合预期：

• 对于静态路由（比如/about），应该生成out/about.html或out/about/index.html；
• 动态路由需要提前预渲染生成对应静态文件，否则刷新会直接404（Next.js静态导出不支持未预渲染的动态路由）。
  如果本地out目录缺少对应文件，需要调整Next.js的页面配置，确保所有需要访问的路由都被预渲染为静态文件。

2. 配置Hostinger服务器的重写规则（.htaccess） #

Hostinger默认使用Apache服务器，需要通过.htaccess文件配置路由 fallback，让所有不存在的文件/目录请求都转发到index.html，由客户端路由处理：
在网站根目录创建或修改.htaccess文件，添加以下规则：

RewriteEngine On
RewriteBase /
# 忽略对index.html的直接请求
RewriteRule ^index\.html$ - [L]
# 如果请求的文件或目录不存在
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 转发到index.html
RewriteRule . /index.html [L]

3. 验证服务器配置 #

• 保存.htaccess后，刷新非首页页面，测试是否正常加载；
• 如果仍无效，检查Hostinger控制面板是否开启了URL重写功能（部分主机需要手动在主机设置中启用）；
• 可以尝试将out目录下的index.html复制一份重命名为404.html，部分主机的404页面 fallback 也能临时解决，但推荐用.htaccess的重写规则。

4. 本地验证排除代码问题 #

在本地用静态服务器测试out目录，确认代码本身无问题：

npx serve out

如果本地刷新非首页正常，说明问题完全在Hostinger的服务器配置上，重点排查.htaccess和URL重写设置。

5. 检查Next.js导出兼容性 #

确保你的Next.js项目没有使用静态导出不支持的功能：

• 静态导出不支持API路由（pages/api下的文件），如果存在会导致导出失败或运行异常；
• 避免使用依赖服务器端渲染（SSR）的功能，比如getServerSideProps，这类功能无法在静态导出中工作。

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