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>
...

Gecko51 · 2026-04-30T11:16:00Z

Gecko51
Apr 30, 2026

Hard to say without seeing the header component, but this is usually one of two things.

First, check you're using <Link href="..."> from next/link in the header, not plain <a href="...">. Both technically navigate, but <a> does a full page reload while <Link> handles client-side routing. Easy to mix them up across components.

Second, if your header has any interactive elements (active state, mobile toggle, onClick), the component needs 'use client' at the top. Without it, event handlers silently don't attach and clicks do nothing. Layouts are server components by default in the App Router.

'use client'

import Link from 'next/link'

export function Header() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
    </nav>
  )
}

Also worth a quick DevTools check: open Elements, hover over one of the broken links, and confirm nothing else is sitting on top and intercepting clicks. A full-width overlay or z-index issue can block them silently.

Can you share the header component? That'll make it easier to pinpoint.

0 replies

Gecko51 · 2026-04-30T17:20:49Z

Gecko51
Apr 30, 2026

Looking at the layout code you shared, I think I spotted the actual problem. Your (website)/layout.tsx has <html> and <body> tags:

return (
  <html lang="en" className="hydrated">
    <body cz-shortcut-listen="true">
      <Header />
      {children}
    </body>
  </html>
)

Only the root app/layout.tsx should have <html> and <body>. When a nested layout wraps in those too, you end up with invalid HTML where <html> is nested inside <html>. The browser tries to auto-correct that, which mangles the DOM tree, and the App Router's client-side navigation breaks in unpredictable ways because the structure it expects doesn't match what's actually rendered.

Fix your (website)/layout.tsx to just wrap in a fragment or a plain div:

import "../globals.css"
import Header from "@/components/shared/header"

export default function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <Header />
      {children}
    </>
  )
}

The <html> and <body> stay exclusively in app/layout.tsx. Route group layouts only add shared UI for that group, nothing more.

Also: cz-shortcut-listen="true" on your body tag is a browser extension injecting that attribute, not something from your code. Not an issue.

Let me know if that fixes the navigation.

0 replies

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

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

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 4 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

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: 4 comments · 2 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

Uh oh!

Gecko51 Apr 30, 2026

Uh oh!

Gecko51 Apr 30, 2026

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

Fred638
Apr 30, 2026

Replies: 4 comments 2 replies

Gauravsingh958
Apr 30, 2026

Fred638 Apr 30, 2026
Author

Gecko51
Apr 30, 2026

Gecko51
Apr 30, 2026

APXs-01
May 1, 2026

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

Check 2 — Active link detection with `usePathname`