Next.js - Routing

---

---

Routing is a technique used in web applications to easily navigate between different directories of an application. Next.js have built-in routing features, so there no need use external routing libraries like React Routing. In this chapter, we will explain routing in Next.js, app routing and page routing.

What is Routing?

Routing is a mechanism by which an application determines how to handle and respond to various URLs or user navigation requests.

Routing in Next.js is based on file systems in project directory. This means the structure of your application files defines the structure of your routes.

Next.js uses a file-system based routing where:

• Folders are used to define routes. A route is a single path of nested folders, following the file-system hierarchy from the root folder down to a final leaf folder that includes a page.js file.
• Files are used to create UI that is shown for a route segment.

Types of Routing in Next.JS

You will asked to choose type of routing for your Next.js project, while creating a new project. Following are routes used in Next.js

• Page Routing
• App Routing

Page Routing

In Page Routing, a straightforward file-to-route mapping is done based pages directory. That means, the file structure in the pages/ directory defines the routes of the application. For example

• pages/index.tsx : This is home page of Next.js app. It can be accessed by 'localhost:3000/'
• pages/about/index.tsx : This define about section in app. It can be accessed by 'localhost:3000/about'

Key Features

• File-to-Route Mapping: In pages route, Any JavaScript file within the pages directory automatically becomes a route.
• Dynamic Routes: Page routing uses [param] in directory names to create dynamic routes (e.g., /pages/product/[id]/index.js for routes like /product/123).
• API Routes: You can define backend routes by creating files under the pages/api directory.

File Structure

Following section shows file structure of pages route.

pages/
    |-- index.js          // Maps to Home page
    |-- about.js          // Maps to '/about'
    |-- [id].js           // Dynamic route for '/:id'
    |-- api/
        |-- hello.js      // API route for '/api/hello'
styles/
    |--global.css         // Global CSS styles
public/                   // Folder to store images and assets

App Routing

App Routing is new routing method introduced in Next.js version 13, which is built on React Server Components and supports shared layouts, nested routing, loading states, error handling, and more. For example.

• app/pages.tsx : This is home page of Next.js app. It can be accessed by 'localhost:3000/'
• app/about/page.tsx This define about section in app. It can be accessed by 'localhost:3000/about'

Key Features

• Shared Layouts: In Next.js App routing, you can define a layout component, which will be visible on every routes.
• Dynamic Routing: App routing uses [param] in directory names to create dynamic routes (e.g., /app/[id]/page.js for routes like /app/123).
• Nested Routes: Each nested folder under the App Directory can represent a new level in the route hierarchy.
• Error Handling: App routing have error.jsx file to handle 404 error, when user visit website that are not declared.

File Structure

Following shows example of file structure App route in Next JS.

app/
    |-- layout.js         // Root layout
    |-- page.js           // Main page
    |-- global.css        // Global CSS file   
    |-- dashboard/        // Nested Route
    |   |-- layout.js     // Dashboard-specific layout
    |   |-- page.js       // Dashboard index page
    |   |-- [id]/
    |       |-- page.js   // Dynamic route for ID
public/                   // Folder to store images and assets