Next.js - App Router Setup

---

---

Next.js App Router

Next.js version 13 and after started using app router setup, in which the structure of your app/ directory determines the routes of your application. This system is known as the App Router in Next.js. In this chapter, we will learn how to setup and use the app router system in Next.js.

Setup App Router

To setup the app router, follow the steps below:

Step 1: Create a Next js Project

First, we need to create a Next.js project. We can do this by running the following command in the terminal:

>> npx create-next-app@latest

After running this you will be prompted to give name for your project. Enter a suitable name, and then you will be asked to choose page router or app router setup. Choose the app router setup. Use the image below as reference.

Step 2: Understanding the App Router System

In Next.js, every file inside the app/ directory automatically becomes a route. For example, if we have a file called app/about/page.tsx, it will become the /about route.

The app/page.tsx file is the default route. If you don't specify a route, it will be the default route.

my-next-app/
 app/
     page.tsx           '/'
     about/   
         page.tsx       '/about'
     contact/ 
         page.tsx       '/contact'

Step 3: Setup Nested Routes

Nested routing refers to defining routes within other routes, to create a hierarchical structure of routes in a web application.

To create a nested About page, create a new folder named 'about' inside the /app/ directory and inside that add a file page.tsx with following code.

// File: app/about/page.tsx 

export default function About() {
    return (
        <div>
            <h1>About Us</h1>
            <p>Welcome to the about page!</p>
        </div>
    );
}

To see output, visit "http://localhost:3000/about". It will look like this.

Step 4: Setup Dynamic Routes

Dynamic routing refers to defining routes that can accept parameters. For example, we can create a route that accepts a parameter like /users/:id. Where :id is a dynamic parameter chosen by the user.

// File: app/users/[id].tsx

import { useRouter } from 'next/router';

export default function UserProfile() {
  const router = useRouter();
  const { id } = router.query;

return <div><h1>User Profile: {id}</h1></div>;
}

Now, visiting http://localhost:3000/users/123 will display User Profile: 123.

Step 5: API Routes

API Routes are used to create simple API endpoints inside Next.js applications. The API Routes are defined in the app/api directory. For example, we can create a route that accepts a POST request to /api/hello and returns a JSON response.

// File: app/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, Next.js API!' });
}

Now, if you visit the URL '/api/hello', you will see the following JSON response:

Example of App Router Setup

In the example below, we will create a dynamic product page. First we start by creating a folder named "products" inside the `/app/` directory. Then, inside the "products" folder, create an `[id].tsx` file. The square brackets `[id]` indicate that this folder represents a dynamic route and the name can be changed based on the product selected by the user.

// File: app/products/[id].tsx

"use client"
import { useParams } from 'next/navigation';

export default function ProductPage() {
  const { id } = useParams();

  return (
    <div>
      <h1>Product {id}</h1>
      <p>This is the product page for item {id}.</p>
    </div>
  );
}

Output

See the output below, page changes based on URL given.