Next.js Logo

Next.js is a React framework that enables the creation of web applications with hybrid rendering, both on the client side and on the server side. With the introduction of version 13, Next.js has incorporated a new routing system called the App Router. This new router simplifies the creation of routes and allows for greater flexibility in defining how pages are loaded, optimizing performance and data handling.

In this chapter, we will learn the fundamentals of the App Router in Next.js 13 and how it differs from previous versions. We will also discuss the advantages it offers and its use in modern applications.

What is the App Router?

The App Router is a new way to handle routes in a Next.js application. While previous versions used a page-based system, the App Router introduces a more intuitive folder and file structure, where each folder can represent a route and each file defines the content or behavior of that route.

For example, if we create a file named page.js inside a folder named about, the App Router will interpret this as the /about route in our application.

javascript

With this structure, routes are defined in a more natural and less error-prone way, as well as allowing more granular control over the page behavior.

This image shows the basic folder structure for a project with App Router

Key Differences with the Previous Page System

Before the introduction of the App Router, routing in Next.js was based on the page system. That is, each file in the pages/ folder corresponded directly to a route. Although this system is still supported in Next.js 13, the App Router brings several improvements:

• Route-level layouts: We can now define layouts at the route level, allowing for component reuse across multiple pages. This facilitates consistency in the application's appearance and reduces duplicate code.

• Simplified data fetching: With the App Router, data fetching is simplified and allows for better performance. We can use functions like getServerSideProps directly within the files defining the routes.

• Optimized rendering: By integrating the App Router, Next.js enhances rendering on both the server and client side, positively impacting load speed and interactivity.

javascript

This modular and component-centered approach is one of the pillars that make the App Router so efficient and easy to use.

Advantages of the App Router in Next.js 13

The App Router brings several advantages that make it a preferred option for building modern applications:

• Improved performance: By optimizing rendering on both the server and client sides, applications built with the App Router have faster load times.

• Modularity: With a folder and component-based structure, the code is easier to maintain and scale.

• Support for layouts: Layouts allow for the reuse of common structures across multiple pages, such as headers and footers.

javascript

This layout component can be used to wrap multiple pages, ensuring they all share a common structure without duplicating code.

Conclusion

The App Router in Next.js 13 represents a step forward in the way we build applications with React. Its modular approach, ability to handle layouts, and performance optimization make this system an excellent choice for developers seeking greater flexibility and control over their applications. As we progress through the course, we will explore its functionalities in more detail and how to make the most of it.