Skip to main content

File-Based Routing

Next.js completely eliminates the need for manual routing schemas. You structure your routes purely through nested folders.

Folder Paths​

Every folder translates directly into a URL segment.

  • app/page.tsx maps to /
  • app/dashboard/page.tsx maps to /dashboard
  • app/dashboard/settings/page.tsx maps to /dashboard/settings

Route Groups​

Sometimes you want to group folders together purely for code organization, but you don't want those folders to affect the URL path.

You can create a Route Group by wrapping the folder name in parentheses ( ).

For example, you might want to share a layout between marketing pages, but exclude the admin dashboard.

Directory structure:

  • app/(marketing)/about/page.tsx
  • app/(marketing)/contact/page.tsx
  • app/admin/page.tsx

Even though the routes are inside the (marketing) folder, the URL paths will still cleanly resolve to /about and /contact. The parenthesis folder is completely ignored by the Next.js router.