Next.js启动报No router instance found错误如何解决？

该错误的核心原因是next/router属于仅客户端可用的API，你在服务端渲染、静态生成的执行阶段调用了相关逻辑导致报错，可按以下步骤排查修复：

排查步骤 #

• 优先排查昨日到今日之间新增、修改的代码，定位所有直接导入next/router（包括import Router from 'next/router'、import { useRouter } from 'next/router'）的文件
• 检查这些文件中router相关逻辑的执行时机，确认是否存在以下触发场景：
  • 在页面的getServerSideProps、getStaticProps等服务端执行的生命周期函数中直接调用了router API
  • 在组件函数外层直接执行router操作（比如调用router.push、读取router.query），没有包裹在客户端执行的逻辑中
  • 若你使用的是Next.js 13+的App Router，还在服务端组件中使用了旧版next/router API

对应解决方法 #

如果你使用Pages Router #

• 所有router相关操作都放到客户端执行时机：比如包裹在useEffect回调中，或者绑定到点击、输入等用户触发的事件回调里
• 若需要在服务端获取路由参数，直接从getServerSideProps/getStaticProps的context参数中取query、pathname等信息，不要在服务端调用next/router
• 必要时可以在文件顶部添加'use client'标记，强制该文件作为客户端组件执行

如果你使用Next.js 13+ App Router #

• 废弃旧的next/router导入，替换为next/navigation提供的新useRouter API
• 在所有使用useRouter的文件顶部必须添加'use client'标记，明确标记为客户端组件

快速验证方式 #

你可以先注释掉近期修改的代码，重新执行npm run dev启动项目，快速定位触发错误的具体代码位置。

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