10 Routing with Next.js

Next.js features a straightforward and effective routing system based on the file structure in the pages directory. This structure simplifies the creation of new routes by just adding files, eliminating the need for separate routing configurations. This chapter discusses both the basics and advanced concepts of routing in Next.js.

10.1 Basic Routing

10.1.1 File-Based Routing

Each file in the pages directory automatically becomes a route. The file structure directly translates to the URL structure. For example:

• pages/index.js corresponds to the homepage of your application (/).
• pages/about.js becomes the route /about.
• pages/blog/index.js represents /blog.

10.1.2 Dynamic Routing

For dynamic routes, like custom URLs for blog posts, use square brackets ([]) in your file names. For example:

• A file named pages/blog/[slug].js corresponds to a route like /blog/my-blog-post, where my-blog-post is a variable parameter.

10.1.3 Link Component

To navigate within your Next.js application, use the Link component from Next.js:

import Link from 'next/link';

// ...

<Link href="/about">
  <a>About Us</a>
</Link>

This component enables client-side routing with optimized prefetching.

10.2 Advanced Routing

10.2.1 API Routes

Next.js also allows the definition of API routes. By adding JavaScript files to the pages/api directory, you can create server-side API endpoints. For example:

• pages/api/user.js sets up an API endpoint accessible at /api/user.

10.2.2 Catch-all Routes

For more complex routing patterns, catch-all routes can be used. A file like pages/[...slug].js can capture multiple URL segments in an array.

10.2.3 Redirects and Rewrites

Redirects and rewrites can be configured in the next.config.js to tailor the routing behavior to your needs.

Routing in Next.js is intuitive and powerful, thanks to the file-based approach that does away with the need for separate routing configurations. With features like dynamic routing, API routes, catch-all routes, and the ability to define redirects and rewrites, Next.js offers developers the flexibility to efficiently design complex application structures.

10.2.4 Exercise: Introduction to Routing with Next.js

10.2.4.1 Task 1: Project Setup

• Create a new Next.js project using create-next-app.

10.2.4.2 Task 2: Static Routes

• Add a file about.js to the pages directory. Implement a component that displays information about you or your project.
• In the pages directory, create a subfolder blog and add a file index.js that displays a list of blog posts.

10.2.4.3 Task 3: Dynamic Routing

• Add a dynamic route in the blog folder by creating a file [post].js. This page should be able to display different blog posts based on a URL variable.

10.2.4.4 Task 4: Linking Pages

• Use Next.js’s Link component to create links on the homepage to your “About Us” page and the blog index.
• On the blog index page, add links to some fictional blog posts that utilize the dynamic routing feature.

10.2.4.5 Task 5: Testing

• Test the application by navigating through the different pages and ensuring all links and routes function as expected.

10.2.4.6 Bonus: Advanced Routing

• Implement catch-all routes or use next.config.js to create custom rewrites or redirects.

10.2.5 App Router: A new era of routing

With the introduction of the App Router in Next.js, developers now have the option of defining routes programmatically. This is done via a manifest file that allows explicit control over routing behavior. This option is particularly useful for complex applications that require advanced routing patterns and custom middleware. It is important to decide whether to use the App Router when creating a new application with create-next-app, as it provides a different routing structure than the traditional Pages Router.

Routing in Next.js is intuitive and powerful, thanks to the file-based approach that eliminates the need for separate routing configurations. With features such as dynamic routing, API routes, catch-all routes and the ability to define redirects and rewrites, Next.js gives developers the flexibility to efficiently design complex application structures.