Next.js Routing Deep Dive — Links Navigation and Route Groups

In this tutorial, you will learn about Next.js Routing Deep Dive. We cover key concepts, practical examples, and best practices to help you master this topic.

Next.js provides client-side navigation with the Link component and useRouter hook, supporting route groups for organization, parallel routes for sections, and intercepting routes for modals.

What You'll Learn

• Link component prefetching
• useRouter for programmatic navigation
• Route groups for organization
• Parallel routes for complex layouts
• Intercepting routes for modals
• Navigation lifecycle events

Why It Matters

Advanced routing patterns keep your app organized and enable complex UIs like modals that show content in-place while the URL changes.

// app/page.jsx
import Link from "next/link";

export default function Home() {
  return (
    <div>
      <Link href="/blog" prefetch={false}>Blog (no prefetch)</Link>
      <Link href="/dashboard" replace>Dashboard (no history)</Link>
    </div>
  );
}

// app/dashboard/@notifications/page.jsx
export default function Notifications() {
  return <div>Notification panel (parallel route)</div>;
}

// app/dashboard/@analytics/page.jsx
export default function Analytics() {
  return <div>Analytics panel (parallel route)</div>;
}

// app/dashboard/layout.jsx
export default function DashboardLayout({ children, notifications, analytics }) {
  return (
    <div className="dashboard">
      <main>{children}</main>
      <aside>{notifications}</aside>
      <aside>{analytics}</aside>
    </div>
  );
}

Expected output: Navigation with control over prefetching and history, parallel route sections render side-by-side in the dashboard layout.