Next.js - Pages

Quiz

Next.js pages are used for file-based routing systems, where the file structure inside the pages/ or app/ directory determines the application routes automatically. In this chapter, we will explain how to create home page, nested routing pages, dynamic pages and layout pages in Next.js.

What are Pages in Next.js?

In Next.js, pages are React components that are linked to routes based on their file names and directory structure. Each page defines what the user sees when they visit a particular route in your application. When you create a new Next.js project, the `/app/` directory becomes the default directory for your app, where you can define the home page and other pages. Any sub-folders or files you add inside the `/app/` directory automatically correspond to specific routes in your app.

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'

If you create Next.js with Page routing instead of App routing, you may see folder with name 'pages' instead on 'app'. It is recommended to use app routing in all your Next.js applications.

Create a New Page

A page in Next.js is any file named page.js (or page.tsx) inside a folder in the /app/ directory or any other routing directories.

Example of Creating Home Page

To create a Next.js home page, open the /app/ directory in your project and create a file named page.js (or page.tsx). Then add following content to the file.

// app/page.jsx file

export default function Home() {
    return (
        <div>
            <h1>Welcome to My Next.js App</h1>
            <p>This is the home page.</p>
        </div>
    );
}

Output

On your terminal, run "npm run dev", This will show output of your code at 'http://localhost:3000/'

Create Nested Routing Pages

To create nested routes, simply organize your files and folders hierarchically in the /app/ directory. See the example below where we create a About page in Next.js

Example of Creating About Page

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

// app/about/page.js file

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

Output

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

Create Layout Pages

Layout pages in App router are used to define shared UI (e.g., headers, footers, navigation). These components will remain in UI even if user is navigating to nested routing pages. See the example below to understand how to create layout elements in Next.js.

Example of Creating Header Layout

To create a header, make a file in app directory "layout.jsx" with following code.

// app/layout.jsx file

import { ReactNode } from 'react';

interface RootLayoutProps {
  children: ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en">
      <body>
        <header>
            <h1>Header Element</h1>
            <p>Header will remain here, when user is navigating</p>
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

Output

Open "localhost:3000" to see output. Navigate to different components, you will see header section remains there.

Create Dynamic Routing Pages

Dynamic routes in Next.js are used to create flexible and reusable routes based on dynamic parameters. This feature is essential when building applications where the routeing page depends on user input, database records, or other dynamic data. For example, if you want to generate a dynamic page based on the product user selected, you can use dynamic route in next.js. See the example code below.

Example of Creating Dynamic Product Page

To create a dynamic product page, start by creating a folder named "products" inside the `/app/` directory. Then, inside the "products" folder, create another folder named `[id]` and add `page.tsx` file inside it. 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.

// app/products/page.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.

Print Page