Next.js Basics›Core· 35 min read

File-Based Routing

In Next.js you do not configure routes — you create folders, and the URLs appear automatically.

What you will learn

Create pages by adding folders
Map a folder structure to URLs
Make a default export page component

Folders are your routes

In plain React you usually set up a router and list every route by hand. Next.js flips this around: the shape of your app folder IS your set of URLs. Make a folder, add a page.js, and that URL just works.

Folder structure on the left, the URL it creates on the right

app/
  page.js          ->  /
  about/
    page.js        ->  /about
  blog/
    page.js        ->  /blog
    contact/
      page.js      ->  /blog/contact

Note: Output (the routes you can now visit): / -> app/page.js /about -> app/about/page.js /blog -> app/blog/page.js /blog/contact -> app/blog/contact/page.js No router config, no route list — the folders did all the work.

What a page file looks like

A page is just a React component that is the default export of a page.js file. Here is a complete /about page:

A page is a React component exported as default from page.js

// app/about/page.js
export default function AboutPage() {
  return (
    <main>
      <h1>About CodingClave</h1>
      <p>We teach web development the friendly way.</p>
    </main>
  );
}

Note: Output (at http://localhost:3000/about): About CodingClave We teach web development the friendly way. Because the file sits at app/about/page.js, Next.js serves this component at the /about URL automatically.

You create	You get the URL
`app/page.js`	`/`
`app/shop/page.js`	`/shop`
`app/shop/cart/page.js`	`/shop/cart`

Tip: A folder with no page.js is just for grouping files — it does not create a visible URL on its own. Only a folder that contains a page.js becomes a page.

Q. You create the file app/pricing/page.js. What URL does it serve?

Answer: A folder name becomes the URL segment and page.js becomes the page, so app/pricing/page.js serves /pricing automatically.

✍️ Practice

Add /about and /contact pages by creating two folders with a page.js in each.
Create a nested page at /blog/news and visit it in the browser.

🏠 Homework

Plan the folder structure for a small site with Home, About, Services and Contact pages, then build it.