Next.js SSG项目部署后页面多次刷新出现404错误求助

1. 修正配置文件位置 #

你把trailingSlash配置写在了package.json里，这是错误的。该配置必须放在next.config.js（或next.config.mjs）文件中，正确配置如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  trailingSlash: true,
  output: 'export' // Next.js 13+ 静态导出需显式声明该配置
}

module.exports = nextConfig

注意：Next.js 13及以上版本，SSG静态导出必须添加output: 'export'，否则生成的文件结构可能不符合预期。

2. 验证静态文件结构 #

执行npm run build后，检查项目根目录下的out文件夹：

• 每个页面应对应一个文件夹，比如首页对应out/文件夹下的index.html，/about页面对应out/about/index.html
• 如果生成的是about.html而不是about/index.html，说明配置未生效，需重新检查next.config.js是否正确，build命令是否完整执行。

3. 调整服务器配置 #

静态部署时，服务器需要正确映射请求路径到对应的index.html文件，以下是常见服务器的配置示例：

Nginx #

在server块中添加如下规则：

location / {
  try_files $uri $uri/ /index.html;
}

Apache #

在项目根目录创建.htaccess文件，添加：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

4. 排查版本兼容性问题 #

你使用的next@13.1.6属于较旧的版本，可能存在静态导出的已知bug。建议升级到13.x系列的稳定版本（如13.4.19），升级命令：

npm install next@^13.4.0 react@^18.2.0 react-dom@^18.2.0

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