Next.js使用"use client"指令触发JSON语法错误求助

核心修复步骤 #

• 修正useRouter导入路径：你的代码误用了Pages Router的路由API，Next.js 13+ App Router模式下，客户端组件应使用next/navigation提供的useRouter：

  "use client"
  
  // 替换原导入语句
  import { useRouter } from 'next/navigation';
  
  export default function Page() {
    const router = useRouter();
  
    return (
      <div>
        <h1>Page</h1>
      </div>
    );
  }
  

• 清理项目缓存：执行命令清除缓存文件，避免残留的旧逻辑干扰：

  rm -rf .next node_modules
  npm install
  npm run dev
  

• 确认路由模式匹配：如果你的项目用的是Pages Router（页面放在pages/目录），不需要添加"use client"指令——Pages Router下所有页面默认都是客户端组件，强行添加会触发不必要的逻辑错误。
• 升级Next.js版本：若使用的是Next.js 13早期版本，可能存在App Router的兼容bug，升级到最新稳定版：

  npm install next@latest
  

错误原因说明 #

Unexpected token u本质是代码尝试解析undefined为JSON导致的。当你在App Router的客户端组件中导入Pages Router的useRouter时，两个路由体系的内部逻辑冲突，触发了错误的JSON解析操作，最终抛出该异常。

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