How does the new app router in Next.js 13 work
Next.js is a React-based web framework that simplifies building server-rendered React applications. It supports a file-based routing system, automatically generating routes based on the file structure. Recently, Next.js introduced a new way to set up routes in a project by using the app directory. The app directory provides the App Router, which presents a fresh approach to constructing applications by leveraging React’s cutting-edge capabilities, including Server Components, Streaming with Suspense, and Server Actions.
Previously, Next.js used a file-based routing system known as the Pages Router. This system defined the navigation structure of a web application through the contents of the pages directory. Each file within this directory corresponded to a specific route, with nested folders contributing to the route hierarchy.
Pages Router vs. App Router
In the Next.js Pages Router, if files are created inside the pages directory, they act as a new route for the UI. For example, if a home.js file were created inside the pages directory, it would act as the /home route for the website.
Similar to how files in the pages directory use routing, the App Router in Next.js relies on folders within the app directory to determine routing. A page.js file inside the corresponding folder specifies the user interface for a specific route. As a result, a folder structure such as app/home/page.js is responsible for rendering the /home route.
Features of App Router
The App Router’s functionalities, such as handling loading states, errors, shared UI components, and template management, are delineated through the following specific files:
The loading.js file
The loading.js file is optional; we can create it within the app directory. This component is displayed on the initial page load and when navigating between sibling routes. Under the hood, loading.js wraps its component in a
The error.js file
The error.js file is also optional and isolates errors in the app’s small subsections. This file is placed inside the route folders, so whenever an error occurs inside that directory, the error component replaces the page.
The layout.js file
This file is used to create a shared UI across multiple pages. A layout can render another page’s layout in itself. Whenever the route is changed to any component inside a layout, the component’s state is preserved because the layout remains mounted.
The template.js file
The template.js file is similar to the layout file, but once the routes are changed, a new component instance is mounted, and the state is not preserved.
Code example
The following section provides a detailed code example to illustrate the implementation and usage of the App Router’s features:
.link{
text-decoration: none;
font-weight: bold;
color: blue;
padding: 5px 10px;
}
.nav{
display: flex;
justify-content: space-around;
align-items: center;
background-color: lightblue;
}Explanation
Provided below is the explanation of each file and its purpose:
The app/page.js file
This file acts as the root file of the project. Whenever we run the project this is the file that is rendered at the root /.
Lines 8–10: In our file we are creating links to our endpoints using the
Linkcomponent that is provided by Next.js for client-side rendering.
The app/page1 folder
This folder is used to create a new route in our application. Inside this folder we have a page.js file to make this route publicly accessible and it also contains the content to be rendered at this route. This file has similar structure as our app/page.js file.
The app/page2 folder
This folder creates another route for our application but to see one of the features of the App Router in action we have also included a loading.js file in this route. This file is rendered when the component is initially being loaded and is replaced by the page.js file once that has finished loading.
Note: The
loading.jsfile is only rendered for the initial load as once the page is loaded for subsequent visits to the route it uses a statically generated version of the page from the server.
Conclusion
The App Router is a great new way to define our routes in Next.js as it provides us with control over the routing of our application giving us many features to customize our routes. It also allows the developers to create components that are rendered on the browser making your web applications faster and providing a better user experience.
Free Resources
