NextJS 16.2.2, route groups, navbar, links not working #194411

Fred638 · 2026-04-30T10:27:44Z

Fred638
Apr 30, 2026

🏷️ Discussion Type

Question

Body

My project structure:

app -> root layout, no page
components -> shared -> header
(website) -> layout and page <-- header imported in layout and shown on page

The problem is that the links don't work in the header, but on the page. Maybe the structure is wrong?

Guidelines

I have read and understood this category's guidelines before making this post.

Gauravsingh958 · 2026-04-30T11:00:38Z

Gauravsingh958
Apr 30, 2026

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 Cause

Route groups (folders wrapped in parentheses like (auth) or (main)) are not part of the URL path.
They are only used for organizing files.

So this structure:

app/
  (main)/
    dashboard/
      page.tsx

👉 The actual route becomes:

/dashboard

NOT:

/(main)/dashboard ❌

✅ Fix 1: Correct your Link paths

Make 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 placement

If your navbar is inside a route group layout like:

app/(main)/layout.tsx

👉 It will only apply to routes inside that group.

📌 If you want a global navbar:
Move it to:

app/layout.tsx

✅ Fix 3: Client vs Server Component

If 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:

Make sure you're using next/link (not <a>)
Avoid wrapping <Link> incorrectly
Ensure no preventDefault() is blocking navigation

✅ Fix 5: Dev server cache issue

Sometimes changes don’t reflect properly:

rm -rf .next
npm run dev

💡 Extra Tip

Route groups are only for organization — never include them in URLs or links.

✅ Summary

Route groups (folder) are ignored in URL
Use clean paths like /dashboard
Place navbar in correct layout
Use Link properly

If you can share your folder structure, I can help pinpoint the exact issue.

2 replies

Gauravsingh958 Apr 30, 2026

This is usually caused by route group paths—let me know if you're still stuck.

Fred638 Apr 30, 2026
Author

Thanks for the details! What I have done: Added "use client" to navbar component, replaced <a tag with <Link., all paths correct and point to an existing page. Attached is the project structure. In route group (website) just a few test pages. Hope this is sufficient.

Layout in (website) route group

import "../globals.css"

import Header from "@/components/shared/header";

export default function Layout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html
            lang="en"
            className="hydrated"
        >
            <body cz-shortcut-listen="true">
                <Header />
                {children}
            </body>
        </html>
    );
}

Header (excerpt)

"use client"
import React from 'react'
import Link from 'next/link';
import Image from 'next/image';

export default function Header() {
    return (
        <header className="bg-white dark:bg-gray-900 drop-shadow-sm fixed top-0 w-full">
            <nav aria-label="Global" className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
                <div className="flex items-center gap-x-12">
                    <Link href="/" className="-m-1.5 p-1.5">
                        <span className="sr-only">Your Company</span>
                       <Image src="/assets/svg/tw_icon.svg" width={32} height={32} alt="Tailwind Logo" className="h-8 w-auto dark:hidden" />
                       <Image src="/assets/svg/tw_icon.svg" width={32} height={32} alt="Tailwind Logo" className="h-8 w-auto not-dark:hidden" />
                    </Link>
                    <div className="hidden lg:flex lg:gap-x-12">
                        <Link href="/new-signin" className="text-sm/6 font-semibold text-brand-900 dark:text-white">New Sign-In</Link>
                        <Link href="/toast" className="text-sm/6 font-semibold text-brand-900 dark:text-white">Toast</Link>
                    </div>
                </div>
                <div className="flex lg:hidden">
                    <button type="button" command="show-modal" commandfor="mobile-menu" className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 dark:text-gray-400 dark:hover:text-white">
                        <span className="sr-only">Open main menu</span>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" data-slot="icon" aria-hidden="true" className="size-6">
                            <path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                    </button>
                </div>
                <div className="hidden lg:flex">
                    <Link href="/sign-in" className="text-sm/6 font-semibold text-gray-900 dark:text-white cursor-pointer">Log in <span aria-hidden="true">&rarr;</span></Link>
                </div>
            </nav>
...

APXs-01 · 2026-05-01T14:39:59Z

APXs-01
May 1, 2026

Adding to the existing answer — another common cause of navbar
links not working in Next.js 16 route groups is the <Link>
component behavior.

Check 1 — Are you using `next/link` correctly?

// ✅ Correct
import Link from 'next/link'
<Link href="/dashboard">Dashboard</Link>

// ❌ Wrong — plain <a> causes full page reload, not client navigation
<a href="/dashboard">Dashboard</a>

Check 2 — Active link detection with `usePathname`

If your navbar links appear broken visually (no active state):

'use client'
import { usePathname } from 'next/navigation'
import Link from 'next/link'

export default function Navbar() {
  const pathname = usePathname()
  
  return (
    <nav>
      <Link 
        href="/dashboard"
        className={pathname === '/dashboard' ? 'active' : ''}
      >
        Dashboard
      </Link>
    </nav>
  )
}

Check 3 — Clear cache completely

rm -rf .next
npm run dev

Route group caching issues often cause stale navigation behavior
in development. A clean rebuild usually fixes ghost link problems.

Hope this helps alongside the layout fix above! 🚀

0 replies

Fred638 · 2026-05-06T11:37:22Z

Fred638
May 6, 2026
Author

Apparently there is an issue with the index page in the project root app/page.tsx, because the links work on all the other public pages.

0 replies

Fred638 · 2026-05-07T10:54:39Z

Fred638 May 7, 2026
Author

I reorganized according to your suggestions. I forgot to mention that I have also implemented auth v5 beta. Works well. Perhaps the proxy configuration is wrong hence causing the issue?

Proxy.ts

// proxy.ts
import NextAuth from "next-auth"
import authConfig from "./auth.config"

const { auth } = NextAuth(authConfig)

export default auth((req) => {
  const { nextUrl } = req
  const isLoggedIn = !!req.auth

  const isPublicRoute = ["/", "/sign-in", "/sign-up", "/forgot-password", "/reset-password"].includes(
    nextUrl.pathname
  )

  // Redirect logged-in users away from auth pages
  if (isLoggedIn && ["/sign-in", "/sign-up"].includes(nextUrl.pathname)) {
    return Response.redirect(new URL("/wsv/dashboard", nextUrl))
  }

  // Protect private routes
  if (!isLoggedIn && !isPublicRoute) {
    // if (!isLoggedIn && !isPublicRoute) {
    const callbackUrl = encodeURIComponent(nextUrl.pathname + nextUrl.search)
    return Response.redirect(
      new URL(`/sign-in?callbackUrl=${callbackUrl}`, nextUrl)
    )
  }

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|public).*)"],
}

blaze0089 · 2026-05-11T10:01:05Z

blaze0089
May 11, 2026

Looking at your proxy.ts there are two things worth checking that nobody has mentioned yet.

First, your app/page.tsx sits outside the (website) route group so it gets the root layout which has no Header at all. That's exactly why links appear broken on the index page but work fine everywhere else — the header simply isn't there. Move your root page inside (website) or add the Header to app/layout.tsx if you want it on every page.

Second, your middleware is doing exact path matching with includes():

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 nextUrl.pathname looks like during navigation:

console.log("middleware path:", nextUrl.pathname, "isLoggedIn:", isLoggedIn)

Also your proxy.ts is missing a closing } for the auth callback which would cause a build error — double check that's not just a paste issue in the post.

1 reply

Fred638 May 12, 2026
Author

Thanks for the tip! I will create a new app without auth and see what happens. I am going to close this thread, since no solution found.

This comment was marked as low quality.

Sign in to view

GitHub Community

NextJS 16.2.2, route groups, navbar, links not working #194411

Uh oh!

Uh oh!

Fred638 Apr 30, 2026

🏷️ Discussion Type

Body

Guidelines

Replies: 7 comments · 4 replies

Uh oh!

Gauravsingh958 Apr 30, 2026

Fix for Navbar Links Not Working in Next.js (Route Groups)

🔍 Root Cause

✅ Fix 1: Correct your Link paths

✅ Fix 2: Check layout placement

✅ Fix 3: Client vs Server Component

✅ Fix 4: Navigation issues (App Router)

✅ Fix 5: Dev server cache issue

💡 Extra Tip

✅ Summary

Uh oh!

Gauravsingh958 Apr 30, 2026

Uh oh!

Uh oh!

Fred638 Apr 30, 2026 Author

This comment was marked as low quality.

This comment was marked as low quality.

Uh oh!

APXs-01 May 1, 2026

Check 1 — Are you using next/link correctly?

Check 2 — Active link detection with usePathname

Check 3 — Clear cache completely

Uh oh!

Fred638 May 6, 2026 Author

This comment was marked as low quality.

Uh oh!

Fred638 May 7, 2026 Author

Uh oh!

blaze0089 May 11, 2026

Uh oh!

Fred638 May 12, 2026 Author

Fred638
Apr 30, 2026

Replies: 7 comments 4 replies

Gauravsingh958
Apr 30, 2026

Fred638 Apr 30, 2026
Author

APXs-01
May 1, 2026

Check 1 — Are you using `next/link` correctly?

Check 2 — Active link detection with `usePathname`

Fred638
May 6, 2026
Author

Fred638 May 7, 2026
Author

blaze0089
May 11, 2026

Fred638 May 12, 2026
Author