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.
This article explains these new features and why they are important.
This should create a new folder called next13 with the new app directory.
Thepages/directory still works in Next 13 to allow for incremental adoption.
Here is the current structure of the app 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, youll 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.
See this article ondifferent rendering methods in Next.jsfor a more in-depth explanation.
For example, you’ve got the option to useprocess.env.
you might also interact with the backend directly.
Consider this async function that fetches data from an API.
This allows the user to view part of the content while the rest is being rendered.
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.
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.
