Next.js App Router: File-System Based Routing

Next.js 13 introduced the App Router, a new paradigm for building React applications. A core feature of the App Router is its file-system based routing, which simplifies the creation of routes and layouts by leveraging the file structure of your project. This approach makes it intuitive to define pages, layouts, loading states, and error handling.

Understanding `page.js`

The

code

page.js

file is the entry point for a specific route segment. It exports a React component that will be rendered when that route is accessed. Each directory within the

code

app

directory can contain a

code

page.js

file, defining a unique URL segment.

What is the primary purpose of the page.js file in Next.js App Router?

It exports the React component that renders the content for a specific route segment.

Leveraging `layout.js` for Shared UI

The

code

layout.js

file allows you to define shared UI components that wrap around your page content. Layouts are nested, meaning a layout in a parent directory will wrap the layouts and pages of its child directories. This is crucial for consistent navigation, headers, footers, and overall application structure.

Layouts enable shared UI across route segments.

A layout.js file exports a React component that receives children as a prop, representing the nested UI. This allows for common elements like navigation bars or footers to be rendered consistently across multiple pages within a route segment.

When you create a layout.js file in a directory, it automatically becomes the default layout for that segment and all its children. The component exported from layout.js must accept a children prop, which will be the rendered page.js or a nested layout.js from a subdirectory. This creates a hierarchy of layouts, enabling you to build complex, nested UIs efficiently. For example, a root layout.js in the app directory can define the overall HTML structure, while a layout.js in a /dashboard directory can add dashboard-specific navigation.

Handling Loading States with `loading.js`

The

code

loading.js

file provides a way to show instant loading states while your page or route segment is being fetched. Next.js automatically wraps your page content with a React Suspense boundary, allowing you to display a fallback UI defined in

code

loading.js

The loading.js file exports a React component that serves as the loading UI. This component is displayed while the associated page or layout is loading, improving the perceived performance of your application.

Managing Errors with `error.js`

The

code

error.js

file allows you to gracefully handle errors that occur within a route segment. Similar to

code

loading.js

, Next.js automatically wraps your page content with an Error Boundary, enabling you to display a custom error UI defined in

code

error.js

The error.js file exports a React component that accepts an error object and a reset function. The error object contains details about the error that occurred, and the reset function can be used to attempt to re-render the segment. This provides a structured way to handle runtime errors and offer recovery options to the user.

📚

Text-based content

Library pages focus on text content

File-System Routing Conventions

The App Router follows specific file naming conventions to define routes and their associated behaviors. Understanding these conventions is key to effectively structuring your Next.js application.

File Name	Purpose	Example Usage
`page.js`	Defines the UI for a specific route segment.	Renders the main content of a page.
`layout.js`	Defines shared UI for a route segment and its children.	Includes navigation, headers, footers.
`loading.js`	Defines the loading UI for a route segment.	Shows a spinner or skeleton while data loads.
`error.js`	Defines the error UI for a route segment.	Displays an error message and a retry button.

Example Directory Structure

Consider this example directory structure within the

code

app

folder:

Loading diagram...

In this structure:

code
```
/app/page.js
```
is the homepage.
code
```
/app/layout.js
```
is the root layout.
code
```
/app/about/page.js
```
is the about page.
code
```
/app/about/layout.js
```
is a layout specific to the about section.
code
```
/app/dashboard/layout.js
```
is a layout for the dashboard section.
code
```
/app/dashboard/settings/page.js
```
is the settings page within the dashboard.

Learning Resources

Next.js App Router Documentation(documentation)

The official and most comprehensive guide to the Next.js App Router, covering all aspects of file-system routing.

Next.js Routing: Pages and Layouts(documentation)

Detailed explanation of how routing works in the App Router, including conventions and best practices.

Next.js Loading UI and Streaming(documentation)

Learn how to implement loading states using the `loading.js` file and React Suspense.

Next.js Error Handling(documentation)

Understand how to handle errors gracefully with the `error.js` file and React Error Boundaries.

Vercel Blog: Introducing the App Router(blog)

An insightful article from Vercel explaining the motivations and benefits behind the App Router and its features.

Next.js 13 Tutorial: App Router(video)

A video tutorial demonstrating the core concepts of the Next.js App Router and file-system routing.

Understanding Next.js App Router - A Deep Dive(video)

A more in-depth video exploring the nuances of the App Router, including layouts and routing patterns.

Mastering Next.js 14: App Router Explained(video)

A comprehensive tutorial focusing on Next.js 14 features, with a strong emphasis on the App Router and its routing system.

Next.js App Router: File-based Routing(blog)

A practical guide from freeCodeCamp explaining how file-based routing works in the Next.js App Router.

Next.js App Router - Layouts, Pages, Loading, Error(video)

A focused video tutorial covering the essential files like `page.js`, `layout.js`, `loading.js`, and `error.js` within the Next.js App Router.

File-system based routing: `page.js`, `layout.js`, `loading.js`, `error.js`

Next.js App Router: File-System Based Routing

Understanding `page.js`

Leveraging `layout.js` for Shared UI

Layouts enable shared UI across route segments.

Handling Loading States with `loading.js`

Managing Errors with `error.js`

File-System Routing Conventions

Example Directory Structure

Learning Resources