Routing Fundamentals

Next.js uses a file-system based router where folders are used to define routes.

In the `app` directory, every folder represents a route segment that maps to a URL segment.

1. Basic Routes

To create a route, simply create a folder and add a `page.tsx` file inside it.

app/about/page.tsx

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

You can nest folders to create nested routes. For example, `app/dashboard/settings/page.tsx` will be accessible at `/dashboard/settings`.

Folder Structure

app/
├── dashboard/
│   ├── settings/
│   │   └── page.tsx
│   └── page.tsx
└── page.tsx

URL Result

Coba buat folder baru bernama `blog` di dalam direktori `app`, lalu buat file `page.tsx` di dalamnya. Lihat apakah kamu bisa mengaksesnya di browser!

localhost:3000/

📂 app/

📂 dashboard/

📂 settings/

📄 page.tsx

Home Page

Click on the folders in the structure to see how the URL changes in the address bar above.