× You have imported a component that requires the useRouter hook. However, it seems that the component is being used in a Server Component instead of a Client Component. This may be causing an error.https://i.sstatic.net/UD7VtlbE.png
"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>
)}
Even though I have added 'use client' at the beginning of the file, I still encounter errors regarding the use of useRouter in a client component. It suggests marking the parent component as 'use client', but this would convert my entire page into a client component.
What's the point of using Next.js if my whole page becomes a client component? Is there a solution to this issue without converting the parent component into a client component?