How does file based routing work in the Next.js App Router?

In the App Router, every folder inside the app directory represents a segment of the URL path, and adding a file named page.js inside that folder makes it a visitable route, so the folder structure of your project directly mirrors the URL structure of your website.

// app/about/page.js is accessible at /about
// app/contact/page.js is accessible at /contact
export default function AboutPage() {
  return <h1>About Us</h1>;
}