Pages and file-based routing

In Next.js you do not list page addresses in a separate route table. A folder inside app/ sets the address, and the page.tsx file in that folder sets the page content. This approach is called file-based routing.

The home page

The home page is the app/page.tsx file. Replace the code generated by the tool with your own:

// app/page.tsx
export default function HomePage() {
  return <h1>My blog</h1>;
}

A page is an ordinary React component exported by default (export default). Open http://localhost:3000 — the heading "My blog" appears.

A new page

To add the /about address, create the app/about folder with a page.tsx file inside:

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>About the blog</h1>
      <p>Anna writes about web development here.</p>
    </main>
  );
}

No server restart is needed: the page is available at http://localhost:3000/about right away.

How folders become addresses

Each nested folder adds one more segment to the address — a part of the path between slashes.

The posts list

Let us make a /posts page with the list of blog posts. For now the data sits right in the file:

// app/posts/page.tsx
const posts = [
  { slug: 'hello-nextjs', title: 'Hello, Next.js' },
  { slug: 'server-components', title: 'Server components' },
];
 
export default function PostsPage() {
  return (
    <main>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}

The /posts address shows a list of two titles. The navigation lesson shows how to turn them into links.

Other files in folders

Only a folder that contains page.tsx becomes an address. Other files next to it — components, styles, functions — cannot be opened by a visitor. For example, app/posts/PostItem.tsx can be imported into the page, but no /posts/PostItem address appears.

Common mistake

Creating app/about.tsx instead of app/about/page.tsx. Next.js does not make a page from a file with an arbitrary name, and /about shows a 404 error. A page is always a folder with a page.tsx file inside.