Next.js 13构建后Link/路由失效问题求助

安全阿岳

2026-7-14

解决方案

检查部署方式与静态导出配置
如果你用next export做静态导出，Next.js 13 App Router默认不支持未预生成的动态路由，需要两步调整：
1. 在next.config.js中添加静态导出配置：
```
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}
module.exports = nextConfig;
```
2. 在动态路由页面app/explore/[id]/page.js中添加generateStaticParams函数，预生成所有需要的路由：
```
export async function generateStaticParams() {
  // 替换为你的实际id集合，比如从数据源获取
  return [
    { id: '0' },
    { id: '1' },
    // 更多id...
  ];
}
```
另外，不要用Live Server这类静态文件服务器直接打开构建后的out文件夹（比如你提到的5500端口），Next.js动态路由需要服务器端支持，静态导出后要部署到支持SPA路由的静态托管服务，或者用next start启动官方生产服务器。
修正Link组件路径写法
确保路径拼接正确，将index转为字符串避免潜在类型问题，同时保持绝对路径格式：
```
<Link href={`/explore/${String(index)}`}>
  {/* 你的列表项内容 */}
</Link>
```
验证路由结构正确性
确认App Router的文件夹结构完全符合要求：
```
app/
  explore/
    page.js       // 列表页面
    [id]/
      page.js     // 动态详情页面
```
注意[id]必须是包裹在方括号中的文件夹名称，不能拼写错误。
排查构建日志
运行next build时仔细查看控制台输出，若有关于动态路由的警告或错误，根据提示修复。比如未预生成动态路由会导致静态导出不完整，进而引发访问问题。