File-based routing

This page explains how routing works in Next.js and demonstrates its implementation through practical examples.

Routing conventions

Next.js uses file-system based routing meaning the URLs you can access in your browser are determined by how you organize the project’s files and folders.

There are three fundamental conventions:

1. All routes must be defined within the app directory
2. Each route is defined by a folder with a page.js or page.tsx file inside it
3. Each page file must export a React component as its default export

When these conventions are followed, files automatically become accessible routes with each folder name becoming a segment in the URL path.

Root route

• Directoryapp/

  • page.tsx

By default, a Next.js project generated using create-next-app will have a root route at localhost:3000 defined by the app/page.tsx file. The page.tsx file exports the Home component as its default export. Update the component to see changes in the browser.

Defining new routes

Let’s create some basic routes to demonstrate how file-based routing works in practice.

About route

To create a route for /about:

1. Create a folder named about inside the app folder
2. Add page.tsx inside it
3. Export a React component as its default export:

app/about/page.tsx

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

The folder name becomes the URL path: app/about/page.tsx → /about

Profile route

Similarly to create a route for /profile:

1. Create a profile folder inside app
2. Add page.tsx inside it
3. Export a React component as its default export:

app/profile/page.tsx

export default function Profile() {
  return <h1>My profile</h1>;
}

The folder name becomes the URL path: app/profile/page.tsx → /profile

Visualizing the folder structure

• Directoryapp/

  • Directoryabout/

    • page.tsx /about
  • Directoryprofile/

    • page.tsx /profile
  • page.tsx /

File-based routing eliminates the need for manual router configuration — your file structure defines the routing behavior, following Next.js’s convention-over-configuration principle.