Navigation in Next.JS

In Single Page Application (SPA) architecture with Vite, defining routes was an explicit task. We had a central file (usually App.jsx or main.jsx) where we imported components and assigned them to URLs using <Route path="/about" element={<About />} />.

Next.js adopts the convention over configuration paradigm. We don’t write a routes file; our folder structure defines the routes.

If you create a folder, you create a route. If you delete the folder, you delete the route. It’s that straightforward, and once you get used to it, it’s hard to go back.

Defining Static Routes

The App Router works based on a golden rule:

Let’s see how the file structure translates to URLs in the browser:

If you create a folder src/app/components, but don’t put a page.tsx inside it, that route won’t exist. This allows us to have folders for organizing code (components, utilities, styles) alongside pages without fear of them being accidentally exposed as URLs.

// src/app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>We are a company dedicated to Next.js...</p>
    </main>
  );
}

Layouts and Nesting

This is where Next.js significantly simplifies the architecture. Think about a “Dashboard” section (/dashboard) that has its own Sidebar, different from the Home page’s. And within the Dashboard, you have /dashboard/settings and /dashboard/profile.

In React Router, managing the Sidebar to not unmount when navigating between settings and profile was complex. In Next.js, this is native thanks to Nested Layouts.

We can create a layout.tsx file at any level of the folder hierarchy.

src/app/
├── layout.tsx      (Root Layout: html, body, Global Navbar)
├── page.tsx        (Home)
└── dashboard/
    ├── layout.tsx  (Dashboard Layout: Sidebar)
    ├── page.tsx    (Dashboard main view)
    └── settings/
        └── page.tsx (Settings view)

When you enter /dashboard/settings:

// src/app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex">
      <aside className="w-64 bg-gray-100 p-4">
        {/* This Sidebar is persistent */}
        <nav>...</nav>
      </aside>
      
      <section className="flex-1 p-8">
        {/* Child pages (settings, profile...) are injected here */}
        {children}
      </section>
    </div>
  );
}

Dynamic Routes

What if we want a route to view a product detail, where the ID changes? (/products/1, /products/nike-shoe). We can’t create infinite folders.

For example:

src/app/products/[id]/page.tsx

The name we put inside the brackets (in this case id) will be the name of the parameter we receive in our component.

// src/app/products/[id]/page.tsx

// Define the type for props
interface Props {
  params: Promise<{
    id: string;
  }>;
}

export default async function ProductDetail({ params }: Props) {
  const { id } = await params;

  return (
    <div>
      <h1>Viewing product with ID: {id}</h1>
      {/* We would fetch from the database using this ID */}
    </div>
  );
}

Navigation with <Link>

Finally, we need to move between these routes. Remember, we cannot use the standard HTML <a href="/about"> tag.

An <a> tag causes a full page reload (Hard Refresh), losing React state and downloading all the JavaScript again.

Next.js provides us with the Link component, which extends the <a> tag but performs navigation on the client (Client-Side Navigation).

import Link from 'next/link';

export default function Navbar() {
  return (
    <nav className="flex gap-4">
      <Link href="/">Home</Link>
      
      <Link href="/dashboard" className="text-blue-500">
        Go to Dashboard
      </Link>
      
      <Link href="/products/123">
        View Product 123
      </Link>
    </nav>
  );
}