Your First Page in Next.js

Now that your project is running, it is time to create your first page.

In Next.js, pages are created using files inside the app/ folder. Each page is defined by a page.tsx file, and its location determines the URL of that page.

This means you do not need to configure routing manually. The file structure handles it for you.

Creating the Home Page

Inside the app/ folder, you already have a file called page.tsx. This file represents the homepage (/).

Update it with your own content:

export default function Page() {
  return <h1>My First Next.js Page</h1>;
}

When you save the file, the browser will update automatically.

Creating a New Page

To create another page, create a new folder inside app/ and add a page.tsx file.

Example:

app/
  about/
    page.tsx

Then add content:

export default function AboutPage() {
  return <h1>About Page</h1>;
}

Now you can open:

http://localhost:3000/about

How Routing Works

• Each folder inside app/ becomes part of the URL;
• Each page.tsx file defines what is shown for that route;
• No additional configuration is required.

This approach is called file-based routing, and it is one of the core features of Next.js.