如何用原生JavaScript在Chrome DevTools中修改Next.js路由？

方法1：直接调用Next.js的Router实例（无刷新） #

Next.js的路由由内部实例维护，在DevTools里可直接获取并调用跳转方法，这是最可靠的无刷新方案：

针对Pages Router #

在控制台执行：

// 获取router实例
const router = require('next/router').default;
// 跳转到目标路由
router.push('/your-target-path');

针对App Router（Next.js 13+） #

可通过全局暴露的路由对象或React上下文获取实例：

// 尝试从全局上下文获取router
const router = window.next.router;
// 若全局对象不存在，从React根节点上下文查找
const reactRoot = document.querySelector('#__next')._internalRoot;
const targetRouter = reactRoot.pendingProps.router || reactRoot.current.props.router;
// 执行跳转
targetRouter.push('/your-target-path');

方法2：模拟Next.js路由更新事件（无刷新） #

如果拿不到router实例，可手动触发Next.js内部监听的路由变化事件：

// 先修改history状态
window.history.pushState({}, '', '/your-target-path');
// 触发Next.js监听的popstate事件（部分版本有效）
window.dispatchEvent(new Event('popstate'));
// 或针对Next.js 13+触发自定义路由事件
window.dispatchEvent(new CustomEvent('next-router-change', { detail: { path: '/your-target-path' } }));

注意：该方法依赖Next.js内部实现，不同版本可能存在兼容性问题，优先用方法1。

方法3：强制跳转（会刷新页面） #

若以上无刷新方案失效，可直接修改location.href强制变更路由，缺点是会触发页面刷新：

window.location.href = '/your-target-path';

关键提示 #

Next.js的路由逻辑不依赖原生popstate事件的监听，而是自行维护路由状态，这也是Vue的方案在Next.js中无效的核心原因。操作时需确保页面已完成客户端 hydration，否则router实例可能未初始化。

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