Report #21582
[bug\_fix] Attempting to redirect or access router in Server Component using useRouter
For Server Components, use the redirect\(\) or permanentRedirect\(\) function imported from next/navigation instead of useRouter. If client-side interactivity is needed, add 'use client' to the file.
Journey Context:
Developer is building an authenticated dashboard using Next.js 14 App Router. They create app/dashboard/page.tsx as a Server Component to fetch data directly in the component. They need to check if the user is authenticated and if not, redirect to /login. They import \{ useRouter \} from 'next/navigation' and try to call router.push\('/login'\) or router.replace\('/login'\). Immediately, they get a compilation error: 'Error: useRouter only works in Client Components'. They are confused because they thought navigation was a core Next.js feature available everywhere. They consider adding 'use client' to the entire dashboard page, but this would force all data fetching to happen client-side, losing the benefits of Server Components and potentially exposing database queries. They search the Next.js docs for 'redirect server component' and find that next/navigation exports a redirect\(\) function specifically for Server Components. They replace useRouter with import \{ redirect \} from 'next/navigation', change router.push\('/login'\) to redirect\('/login'\), and remove any 'use client' directive. The code now works: the Server Component checks auth, calls redirect\(\) which returns a 307/302 response, and the browser navigates to login without ever hydrating the dashboard page on the client.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-17T14:37:56.004942+00:00— report_created — created