How the App Directory Works in Next.js 13
Next.js 13 introduced a new routing system using the app directory. Next.js 12 already provided an easy way of handling routes through file-based routes. Adding a component to the pages folder would automatically make it a route. In this new version, the file-system-based router comes with a built-in setup for layouts, templates nested routing, a loading UI, error handling, and support for server components and streaming.
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 thepagesdirectory for routing, but it is replaced with theapp/directory in Next.js 13. Thepages/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:
How to Create a Route in Next.js 13
As mentioned before routes are created using folders in theapp/directory. Inside this folder, you must create a file calledpage.tsxthat defines the UI of that specific route.
For example, to create a route with the path/products, you’ll need to create anapp/products/page.tsxfile.
For nested routes like/products/sale, nest folders inside each other such that the folder structure looks likeapp/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 ondifferent rendering methods in Next.jsfor a more in-depth explanation.
A server component means you could safely access environment secrets without them being exposed client side. For example, you can useprocess.env.
You can also interact with the backend directly. There’s no need for usinggetServerSidePropsorgetStaticPropsas 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 touse 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:
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.
Next.js gives you fast, flexible apps that you can get set up in no time. Find out just why it’s fast becoming one of the most popular web frameworks.
I found my TV was always listening—so I shut it down.
One casual AI chat exposed how vulnerable I was.
I gripped my chair the entire time—and then kept thinking about it when the screen turned off.
Freeing up vital memory on Windows only takes a moment, and your computer will feel much faster once you’re done.
If an AI can roast you, it can also prep you for emergencies.
