What's happening with Next.js 13's app router?

It's been almost six months since Vercel announced Next.js 13. It introduced many groundbreaking changes that changed the way we developed apps with Next.js and React.

However, even after half a year, the developer community has mixed opinions on the new update, especially the "app router". In this blog, let's understand what's happening with Next.js 13, its new updates, and the developer community.

The new app directory

The magic of Next.js had been in its file-based routing system. Every file inside the /pages directory was a separate route on the website. Next.js 13 fundamentally changes this concept with the /app directory.

Next.js 13 introduces a new /app directory at the root of your codebase. Unlike previous versions, which followed a file-based routing system, it follows a directory-based file routing approach. Every route has its own separate directory, and several naming conventions exist for the files to be used in different scenarios.

The Next.js team closely worked with the core React team to bring this update. The /app directory leverages React Server components to build the application.

React Server Components is a new feature introduced in React 18 that allows developers to build applications that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.

This feature brings a massive architectural rewrite to the existing codebase. Many things developers took for granted, like the useEffect hook or third-party libraries like react-query, can not be used with the latest versions.

Major improvements in Next.js 13 app directory

The app directory in Next.js 13 is a new feature that introduces a number of improvements over the previous pages' directory. Let's briefly discuss the three major changes regarding the /app directory:

1. Layouts: The app directory makes it easier to share UI between routes by introducing the concept of layouts. A layout is a special file that can define common UI elements shared across multiple routes. This can reduce the amount of code duplication and improve the overall performance of your application.
2. Server Components: The app directory also introduces support for Server Components. Server Components are React components rendered on the server before being sent to the client. This can improve the performance of your application by reducing the amount of JavaScript that needs to be downloaded by the client.
3. Streaming: The app directory also supports streaming. Streaming allows you to load your application's UI in stages, which can further improve the performance of your application.

How to create a new route in Next.js 13?

As mentioned in the previous section, routing happens in the /app directory. Every route has a separate directory, and data fetching, error handling, meta tags, layouts, and other things are handled within the directory.

With the new update, you can create three types of routes: regular routes, dynamic routes, and grouped routes.

Regular routes

Create a file in the directory named page.tsx (.js if you use JavaScript). This will be an entry file for your route. It takes care of all the main routing logic and displays functionalities for the route.

Dynamic routes

When square brackets surround the directory name, it's a dynamic route. Dynamic routes are helpful when you want to render the webpage based on specific data, like ID, username, slug, etc. It's the same as the dynamic routing in the old file-based routing system, which uses square brackets to wrap files with dynamic routes.

Grouped routes

One more approach exists in the new version, which was absent in the previous versions: parenthesis. Every folder inside the app directory contributes to the URL path. But, it is possible to opt out of it by wrapping the folder name inside parentheses. The file system will ignore directories wrapped inside parentheses. This is handy when placing a file somewhere without affecting the URL structure.

Creating a user interface with Next.js 13

Each route is built inside a specific directory inside the /app directory. Several reserved file names inside each directory allow you to render specific data based on specific scenarios. We already saw page.tsx, which acts as an entry point for rendering the route. Let's explore other filenames as well:

• layout.tsx: Defines a shared UI across multiple pages. A layout can accept another layout as its child. Similarly, you can nest layouts to create nested routes.
• loading.tsx: It's an optional file that renders a loading state for a particular app part. It utilizes React Suspense Boundary and automatically wraps it to a page or a child. As a result, the loading UI is displayed immediately when the user navigates to the route or a signing route for the first time.
• error.tsx: This is also an optional file that renders errors related to specific parts of an app. It shows specific error information and ways to resolve the error. This automatically wraps its children in React Error Boundary.
• template.tsx: It's an option file that works similarly to layout.tsx but for the navigation.
• head.tsx: This optional file defines content inside the <head> tag for a specific route.

Why developers don't like the new update?

As said at the beginning of this blog, many developers are against the idea of using server components for the Next.js application. And there are several arguments many developers are agreeing upon, mainly:

1. Next.js introduces a completely new approach to architect frontend applications. This requires a lot of relearning of everything we have learned so far.
2. Third-party services, SDKs, and many popular libraries don't work at all, as everything gets rendered on the server first. Hence popular libraries like react-query, react-hook-form, SWR, and many CSS-in-JS libraries are obsolete.
3. There is not much documentation available on some parts, like React's RSE Wire format.
4. The app router update is production-ready yet. Hence to build apps for production, we must rely on incomplete updates or keep using older versions.

Another thing to note is that as the app router is recently introduced, there is little to no help available on online forums like StackOverflow.

Frequently asked questions

Can I still use the old /pages approach?

You can use the file-based routing mechanism with the newest framework versions. If you are facing errors, use Next.js 12 instead. Neither the Vercel nor Next.js team has mentioned anything about deprecating support for /pages in their roadmap.

Can I incrementally adopt the new changes?

Yes, you can. The file-based /pages and directory-based /app approaches can coexist inside the same app unless routes don't overlap.

Further readings

• Next.js App Directory Documentation
• Working with the app directory in Next.js 13