Understanding Routing in Next.js

Next.js provides powerful and flexible routing capabilities, allowing developers to easily create dynamic and customisable routes. Routing allows users to navigate between different pages or views within an application. In Next.js, routing is based on a file system-based approach, where URL paths in the browser are determined by files and folders in the codebase.

The App Router in Next.js

Routing in Next.js 14 support two routing approach, it is recommended to use App Router approach.

1. File-based routing (pages directory): Simple, maps files to routes (e.g., pages/about.js -> /about).
2. App Router (app directory): More flexible, supports nested routes, layouts, server components (introduced in Next.js 13).

Key Differences:

Directory: pages vs. app.
Features: Basic vs. Nested routes, layouts, server components.

The App Router was introduced in Next.js 13, released in October 2022. The App Router represents a significant shift in the way Next.js handles routing, introducing several new concepts and features, such as

1. File-based routing in the app directory: This new directory structure allows for more intuitive organisation of pages and layouts.
2. React server components: Enables more efficient server-side rendering by allowing components to be rendered on the server.
3. Layouts: Provides a way to define a consistent UI across different pages.
4. Nested Routing: Allow routes to be nested and layouts to be shared between them.
5. Loading and error components: Facilitate the handling of load states and errors at the route level.

Next.js 14 introduced a new App Router built on React Server Components. This router supports shared layouts, nested routing, loading states, error handling, and more. It provides enhanced capabilities for building applications using React’s latest features 

Index Route

The section labelled Index Route refers to the root path of your application, typically denoted by a forward slash (/). In the example, it points to a file named.

Dynamic routing

The Dynamic Route section refers to a route that can accept variable parts, indicated by square brackets []. Next.js provides a feature called Dynamic Routes that allows you to create routes that can accept variable parts in the URL. This is achieved by using square brackets [] in the route definition. The variable part captured by the brackets can then be used within the appropriate component.

For example, let’s say you have a page that displays product details based on a product slug. You could define a dynamic route as /products/[slug], where [slug] is the variable part of the URL that corresponds to the product slug.
In your code, you would create a file called slug.tsx in the products folder within the pages directory. This file will serve as the component for rendering the product detail page.

// app/products/[slug]/page.tsx
import { useRouter } from 'next/router';

export default function ProductPage() {
  const router = useRouter();
  const { slug } = router.query;

  return <h1>Product: {slug}</h1>;
}

One of the advanced routing techniques is the use of slugs and catch-all routes, such as […slug]. These features allow for more dynamic URL structures, which can be particularly useful for blogs, e-commerce sites, and other content-driven applications.

Catch-All Routes

The Catch-all route section refers to a route that will match any URL that doesn’t match a previously defined route. In the example, the /products/…slugs path will match any URL that starts with /products/ followed by anything. Anything after the initial /products/ is caught by the …slugs parameter and can be used within the appropriate component, presumably page.tsx.

// app/products/[...slugs]/page.tsx
import { useRouter } from 'next/router';

export default function CatchAllProductsPage() {
  const router = useRouter();
  const { slugs } = router.query;

  return <h1>Slugs: {Array.isArray(slugs) ? slugs.join(', ') : slugs}</h1>;
}

Note: If we have dynamic and catch all routes, then the dynamic will get first priority as it more structure and common approach.

Layouts

Layouts provide consistent UI across pages:

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <nav>My Navigation</nav>
        <main>{children}</main>
      </body>
    </html>
  );
}

Each page or group of pages can have its own layout:

// app/products/layout.tsx
export default function ProductsLayout({ children }) {
  return (
    <div>
      <aside>Products Sidebar</aside>
      <section>{children}</section>
    </div>
  );
}

Conclusion

The introduction of the App Router in Next.js 13 has made routing more powerful and flexible, allowing developers to create more dynamic and maintainable applications. With features like nested routing, layouts, and React Server Components, the App Router is a major step forward in the Next.js ecosystem.