Create Pages in Next.js: Complete Step-by-Step Tutorial

How to Create Pages in Next.js: Step-by-Step Tutorial

Next.js is a popular React framework that enables developers to build efficient, scalable web applications with ease. One of the core features of Next.js is its file-based routing system which allows you to create pages simply by adding files in the pages directory. This tutorial will walk you through the essentials of creating pages in a Next.js application, explaining key concepts and showing practical examples.

Prerequisites

Basic knowledge of React and JavaScript.
Node.js and npm installed on your system.
A code editor such as Visual Studio Code.

Step 1: Set Up a New Next.js Project

If you don’t have a Next.js project set up already, the easiest way to start is by using create-next-app. Open your terminal and run:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app
npm run dev

This command initializes a new Next.js project in the my-nextjs-app folder and starts the development server on http://localhost:3000.

Step 2: Understanding Pages Directory

Next.js uses a pages directory where each JavaScript (.js) or TypeScript (.tsx) file corresponds to a route. For example:

pages/index.js maps to the home page /.
pages/about.js maps to /about.

This means creating a new page is as simple as adding a new file.

Step 3: Creating a New Page

To create a new page, follow these instructions:

Inside the pages directory, create a new file called about.js.
In this file, export a React component as default:

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Welcome to the about page of our Next.js app.</p>
    </div>
  );
}

Save the file, and then visit http://localhost:3000/about in your web browser. You should see your new About page.

Step 4: Creating Nested Pages (Subroutes)

To create nested pages or subroutes, create folders within pages. For example:

Create a folder blog inside pages.
Inside pages/blog, create a file called first-post.js:

export default function FirstPost() {
  return <h1>My First Blog Post</h1>
}

This page is accessible at /blog/first-post.

Step 5: Dynamic Routing

You can create dynamic routes in Next.js using square brackets in filenames. For example, a user profile page could be defined as:

pages/users/[id].js

Inside this file, you can fetch the id parameter from the router and render content accordingly:

import { useRouter } from 'next/router';

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

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

This page is dynamically accessed using a URL like /users/123.

Step 6: Link Between Pages

To navigate between pages, Next.js provides the Link component. Import it from next/link:

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About Page</Link>
    </div>
  );
}

Troubleshooting Tips

Make sure your Next.js development server is running (npm run dev).
Check that your page component is exported as default.
Confirm the filename uses the correct casing and extension (.js or .tsx).
Use next/link for client-side navigation to improve performance.
For dynamic routes, verify you are passing the correct parameters.

Summary Checklist

Set up a Next.js app using create-next-app.
Create pages by adding files in the pages directory.
Create nested routes through folders inside pages.
Build dynamic routes using square brackets in filenames.
Use next/link for navigation between pages.

For more beginner-friendly guidance, check out our How to Install Next.js: Beginner’s Step-by-Step Guide post.

Creating pages in Next.js is intuitive thanks to its file-based routing. You can quickly expand your app by adding static, dynamic, or nested routes. This tutorial equips you with the foundation to build scalable React applications with Next.js routing.