Next.js使用SSG执行next export部署后出现大量JSON文件404请求问题

问题根因 #

你遇到的报错是Link组件的href和as属性值不匹配导致的：

• Next.js 客户端路由自带页面预加载逻辑，会自动根据Link的href值请求对应页面的静态JSON数据，用来实现无刷新跳转，这就是你没主动写代码却有大量JSON请求的原因
• 开发环境有Next.js本地服务支撑，会自动匹配路由并返回对应资源，所以不会报错
• 执行next export导出纯静态站点部署后，没有服务端路由处理逻辑，你给非开发环境的as属性加了.html后缀，但href仍为无后缀路径，框架按href路径请求JSON文件自然找不到匹配的资源，就会抛出router.js相关的GET报错

解决方案 #

方案1（推荐）：修改Next.js配置，移除自定义as逻辑 #

在next.config.js中添加如下配置：

module.exports = {
  // Next.js 12.3+ 可直接用output配置替代老的next export命令
  output: 'export',
  trailingSlash: true
}

该配置下导出的静态文件会自动将每个页面生成为对应路径下的index.html，不需要手动给链接加.html后缀，直接写原生Link代码即可：

<Link href={'/' + nav.page.slug.current}>
  <a style={{ textDecoration: 'none' }}>
    <StyledLink active={activePage === nav.page.slug.current}>
      {nav.page.title}
    </StyledLink>
  </a>
</Link>

方案2：统一href和访问路径规则 #

如果你一定要保留.html后缀的访问路径，直接根据环境统一href的值即可，不需要额外加as属性：

<Link
  href={isDev ? `/${nav.page.slug.current}` : `/${nav.page.slug.current}.html`}
>
  <a style={{ textDecoration: 'none' }}>
    <StyledLink active={activePage === nav.page.slug.current}>
      {nav.page.title}
    </StyledLink>
  </a>
</Link>

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