Lesson 1.1Free

File-system routing and the app directory

The App Router maps folders to URL segments and reserved filenames to behaviour. Once you can read a folder tree as a set of routes, most of the framework stops being magic.

5mIntermediate18,240 students
Video thumbnail for File-system routing and the app directory

Sign in to watch this lesson

Browsing is free. Create an account to play videos and track your progress.

Overview

The App Router maps folders to URL segments and reserved filenames to behaviour. Once you can read a folder tree as a set of routes, most of the framework stops being magic.

What this lesson covers

  • Map folders and page files to URL segments
  • Use route groups to organise without affecting the URL
  • Recognise the reserved files: page, layout, loading, error, not-found

This lesson sits in Routing and Layouts, part of Next.js App Router in Depth. It assumes what came before it and leads directly into the next lesson in the module.

In this lesson you will:

  • Map folders and page files to URL segments
  • Use route groups to organise without affecting the URL
  • Recognise the reserved files: page, layout, loading, error, not-found

Pro Tip

A folder in parentheses is a route group: it organises your files without adding a segment to the URL.