Next.js添加'use client'仍报错，如何避免父组件转客户端组件？

云原生阿岚

2026-6-20

解决Next.js中useRouter在客户端组件的报错问题

你的核心问题是"use client"指令的写法错误，导致Next.js无法正确识别该组件为客户端组件，进而引发useRouter的使用报错。

关键修正步骤

移除"use client"后面的空格，确保指令为"use client";（空格会破坏指令的识别逻辑，组件仍会被默认当作服务器组件）
无需修改父组件，Next.js允许服务器组件直接嵌套客户端组件，只要当前组件正确标记为客户端组件即可

修正后的完整代码：

"use client";
import { useRouter } from 'next/navigation'

export const NavBar = () => {
  const router = useRouter()

  return (
    <div className='fixed inset-x-0 top-0 h-20 bg-gray-900 flex items-center justify-between px-10'>
        <div></div>
        <div>
            <button
                onClick={() => router.push('/api/auth/signin')}
                className='bg-blue-500 text-white px-4 py-2 rounded-md'>
                Login
            </button>
        </div>
    </div>
  )
}