This article explains these new features and why they are important.
Getting Started With Next.js 13
Create your own Next.js 13 project by running the following command in the terminal.
This should create a new folder called next13 with the new app directory.
Understanding the New App Directory
Next.js 12 used the pages directory for routing, but it is replaced with the app/ directory in Next.js 13. The pages/ directory still works in Next 13 to allow for incremental adoption. You only need to ensure you don’t create files in the two directories for the same route as you’ll get an error.
Here is the current structure of the app directory.
In the app directory, you use folders to define routes, and the files inside these folders are used to define the UI. There are also special files like:
page. tsx - The file used to create the UI for a particular route. layout. tsx - It contains the layout definition of the route and is shareable across multiple pages. They are perfect for navigation menus and sidebars. On navigation, layouts preserve state and don’t re-render. This means that when you navigate between pages that share a layout, the state remains the same. One thing to note is that there must be a topmost layout (the root layout) containing all the HTML and body tags shared across the entire application. template. tsx - Templates are like layouts however they don’t preserve the state and are re-rendered every time they are used to create a page. Templates are perfect for situations where you need certain code to run every time the component is mounted, for example, enter and exit animations. error. tsx - This file is used to handle errors in the application. It wraps a route with the React error boundary class such that when an error occurs in that route or its children it attempts to recover from it by rendering a user-friendly error page. loading. tsx - The loading UI is instantly loaded from the server as the route UI loads in the background. The loading UI can be a spinner or a skeleton screen. Once the route content loads, it replaces the loading UI. not-found. tsx - The not-found file is rendered when Next. js encounters a 404 error for that page. In Next. js 12, you’d have to manually create and set up a 404 page. head. tsx - This file specifies the head tag for the route segment it’s defined in.
How to Create a Route in Next.js 13
As mentioned before routes are created using folders in the app/ directory. Inside this folder, you must create a file called page.tsx that defines the UI of that specific route.
For example, to create a route with the path /products, you’ll need to create an app/products/page.tsx file.
For nested routes like /products/sale, nest folders inside each other such that the folder structure looks like app/products/sale/page.tsx.
Aside from a new way of routing other interesting features the app directory supports are server components and streaming.
Using Server Components in the App Directory
The app directory uses server components by default. This approach reduces the amount of JavaScript sent to the browser as the component is rendered on the server. This improves performance.
See this article on different rendering methods in Next.js for a more in-depth explanation.
A server component means you can safely access environment secrets without them being exposed client side. For example, you can use process.env.
You can also interact with the backend directly. There’s no need for using getServerSideProps or getStaticProps as you can use async/await in the server component to fetch data.
Consider this async function that fetches data from an API.
You can call it directly on a page as follows:
Server components are great for rendering non-interactive content. If you need to use React hooks, event listeners, or browser-only APIs, use a client component by adding the “use client” directive at the top of the component before any imports.
Incrementally Streaming Components in the App Directory
Streaming refers to sending parts of the UI to the client progressively until all the components are rendered. This allows the user to view part of the content while the rest is being rendered. To give users a better experience, render a loading component like a spinner until the server completes rendering the content. You do this using in two ways:
Creating a loading. tsx file that will be rendered for the entire route segment.
Wrapping individual components with React Suspense boundary and specifying a fallback UI.
Before the Products component is rendered, a user will see “Products…”. This is better than a blank screen in terms of user experience.
Upgrading to Next.js 13
The new app directory is definitely an improvement from the previous pages directory. It includes special files like layout, head, template, error, not-found, and loading that handle different states when rendering a route without needing a manual setup.
Additionally, the app directory also supports streaming, and server components leading to improved performance. While these features are great for both users and developers, most of them are currently in beta.
However, you can still upgrade to Next.js 13 as the page directory still works then start using the app directory at your own pace.
