Next.js

Pages & File-based Routing

In Next.js's App Router, a folder under app/ containing a page.js file automatically becomes a route.

Example: two routes from two files

app/page.js           -> the homepage,        "/"
app/about/page.js      -> becomes             "/about"
app/blog/[slug]/page.js -> becomes            "/blog/anything-here"

// app/about/page.js
export default function AboutPage() {
  return <h1>About us</h1>;
}

Notice the third example: square brackets in a folder name ([slug]) create a dynamic route, one file that handles any value in that position of the URL, with the actual value ("anything-here") available inside the component as a parameter. This is exactly how a blog with hundreds of posts is served from one single page file instead of one file per post.

// app/about/page.js
export default function AboutPage() {
  return <h1>About us</h1>;
}

Visiting /about renders an <h1> reading "About us".

← Introduction to Next.js Server Components vs. Client Components →