NextJS 12.3.1静态路由跳转请求无效JSON文件返回404错误

核心问题定位 #

从请求路径[pid].json和undefined.json来看，问题根源是动态路由参数pid未被正确传递或解析，导致Next.js无法找到预生成的对应静态数据文件。

具体修复步骤 #

1. 校验uri变量的有效性 #

• 在渲染<Link>的位置打印uri值，确认它是预期的新闻ID（如具体字符串/数字），而非undefined或[pid]这类无效值。
• 若uri来自异步数据请求，确保数据加载完成后再渲染组件，避免初始渲染时变量未赋值。

2. 规范<Link>组件写法 #

推荐使用Next.js官方的对象式href写法，避免字符串拼接可能引发的解析错误：

<Link href={{
  pathname: '/news/[pid]',
  query: { pid: uri }
}}>
  <a className="button">Read</a>
</Link>

这种方式能让Next.js精准解析动态路由参数，避免生成错误的/_next/data请求路径。

3. 检查getStaticPaths与getStaticProps配置 #

确保news/[pid].js页面文件中：

• getStaticPaths正确生成所有需预渲染的pid路径：

export async function getStaticPaths() {
  // 从数据源获取所有新闻ID
  const newsList = await fetch('你的新闻数据源').then(res => res.json());
  const paths = newsList.map(item => ({
    params: { pid: item.id.toString() }
  }));

  return {
    paths,
    fallback: false // SSG模式下建议设为false，确保所有路径预生成
  };
}

• getStaticProps正确接收pid参数并生成对应静态数据，保证部署后服务器上存在/_next/data/.../news/[对应pid].json文件。

4. 重新构建部署 #

清除本地构建缓存后重新构建：

rm -rf .next && npm run build

将新的构建产物（.next目录及静态文件）重新部署到服务器，确保静态数据文件为最新版本。

额外检查项 #

• 确认服务器静态文件配置允许访问/_next/data目录下的JSON文件，未被路由规则拦截。
• 若使用自定义服务器（如Express），确保路由规则正确转发SSG页面请求，不干扰Next.js静态资源加载。

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