NextJS 16.2.2, route groups, navbar, links not working #194411
Replies: 7 comments 4 replies
-
Fix for Navbar Links Not Working in Next.js (Route Groups)If your navbar links are not working when using route groups in Next.js 16+, the issue is usually related to how route groups are handled in URLs. 🔍 Root CauseRoute groups (folders wrapped in parentheses like So this structure: 👉 The actual route becomes: NOT: ✅ Fix 1: Correct your Link pathsMake sure you're linking to the actual route: import Link from 'next/link';
<Link href="/dashboard">Dashboard</Link>❌ Wrong: <Link href="/(main)/dashboard">Dashboard</Link>✅ Fix 2: Check layout placementIf your navbar is inside a route group layout like: 👉 It will only apply to routes inside that group. 📌 If you want a global navbar: ✅ Fix 3: Client vs Server ComponentIf your navbar uses interactivity (like onClick, state, etc.), ensure: 'use client';At the top of your navbar component. ✅ Fix 4: Navigation issues (App Router)If navigation is not triggering:
✅ Fix 5: Dev server cache issueSometimes changes don’t reflect properly: rm -rf .next
npm run dev💡 Extra TipRoute groups are only for organization — never include them in URLs or links. ✅ Summary
If you can share your folder structure, I can help pinpoint the exact issue. |
Beta Was this translation helpful? Give feedback.
This comment was marked as low quality.
This comment was marked as low quality.
This comment was marked as low quality.
This comment was marked as low quality.
-
|
Adding to the existing answer — another common cause of navbar Check 1 — Are you using
|
Beta Was this translation helpful? Give feedback.
-
|
Apparently there is an issue with the index page in the project root |
Beta Was this translation helpful? Give feedback.
This comment was marked as low quality.
This comment was marked as low quality.
-
|
Looking at your proxy.ts there are two things worth checking that nobody has mentioned yet. First, your Second, your middleware is doing exact path matching with const isPublicRoute = ["/", "/sign-in", "/sign-up", ...].includes(nextUrl.pathname)This works fine for those exact paths but if any navigation involves a trailing slash or query param it won't match and will redirect unauthenticated users away. Worth adding a console log inside the middleware to see exactly what console.log("middleware path:", nextUrl.pathname, "isLoggedIn:", isLoggedIn)Also your proxy.ts is missing a closing |
Beta Was this translation helpful? Give feedback.

Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
🏷️ Discussion Type
Question
Body
My project structure:
The problem is that the links don't work in the header, but on the page. Maybe the structure is wrong?
Guidelines
Beta Was this translation helpful? Give feedback.
All reactions