NextJS动态路由开发环境编译卡住无报错，如何排查问题？

错误原因排查 #

• 1. getStaticPaths 用法完全不符合NextJS规范，这是导致编译卡死的核心原因
  • getStaticPaths 是构建阶段运行的服务端方法，不允许调用客户端React Hook useRouter，构建阶段根本不存在路由实例，执行到这里会直接抛出未捕获异常，导致进程终止
  • getStaticPaths 的返回值格式错误，必须返回包含paths数组和fallback字段的结构，不能直接返回params。NextJS构建时需要根据paths数组里的参数预生成所有动态路由的静态页面，你当前的返回值会让构建逻辑陷入异常流程最终卡死
• 2. getStaticProps 存在冗余错误代码
  • 用axios发起请求后，返回结果已经自动解析为JSON，不需要再调用response.json()（该方法是fetch API的用法），直接取response.data即可，多余调用会抛出类型错误。

修正后代码示例 #

正确的getStaticPaths写法（按需选一种即可） #

如果你需要预生成所有游戏的静态页：

export async function getStaticPaths(){
    // 构建时先请求全量游戏ID列表，生成需要预渲染的路径
    const res = await axios.get('你获取全量游戏ID的接口地址')
    const paths = res.data.map(game => ({
        params: { id: game.gameID.toString() }
    }))

    return {
        paths,
        fallback: false // 未匹配到的路径直接返回404
    }
}

如果不需要预生成所有页面，开启增量静态生成：

export async function getStaticPaths(){
    return {
        paths: [], // 不预生成任何页面
        fallback: 'blocking' // 首次访问时动态生成静态页，后续访问复用缓存
    }
}

修正后的getStaticProps #

export async function getStaticProps({ params }) {
    const response = await axios.get(`https://www.cheapshark.com/api/1.0/games?id=${params.id}`)
    const gameData = response.data

    return {
      props: {
        data: gameData,
      },
      revalidate: 86400 // 可选，开启增量更新，每天重新生成一次页面数据
    }
}

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