App Router Basics
App Router Basics
# App Router Basics
In version 13, Next.js introduced a new **App Router** built on React Server Components, which supports shared layouts, nested routing, loading states, error handling, and more.
The App Router works in a new directory named `app`.
## Folders and Files
Next.js uses a file-system based router where:
- **Folders** are used to define routes. A route is a single path of nested folders, following the file-system hierarchy from the root folder down to a final leaf folder that includes a `page.js` file.
- **Files** are used to create UI that is shown for a route segment.
For example, to create the route `/dashboard/analytics`:
1. Create a folder `app/dashboard`
2. Inside it, create a folder `analytics`
3. Inside `analytics`, create a file `page.tsx`
If a folder doesn't have a `page.js` file, that route will not be publicly accessible!
In version 13, Next.js introduced a new **App Router** built on React Server Components, which supports shared layouts, nested routing, loading states, error handling, and more.
The App Router works in a new directory named `app`.
## Folders and Files
Next.js uses a file-system based router where:
- **Folders** are used to define routes. A route is a single path of nested folders, following the file-system hierarchy from the root folder down to a final leaf folder that includes a `page.js` file.
- **Files** are used to create UI that is shown for a route segment.
For example, to create the route `/dashboard/analytics`:
1. Create a folder `app/dashboard`
2. Inside it, create a folder `analytics`
3. Inside `analytics`, create a file `page.tsx`
If a folder doesn't have a `page.js` file, that route will not be publicly accessible!