How Does the Next.js 13 App Directory Work?

TL;DR

Next.js 13's app directory replaces the pages folder, where every route is a folder containing a page.js file and nested folders create nested routes. Components are React Server Components by default, allowing direct data fetching, while a loading.js file automatically shows a loader and layout.js files wrap pages at any level.

Transcript

what's going on guys in this video we're going to be looking at next JS version 13 and we're going to look at all the new features such as the app directory we're going to look at react server components and how to fetch data from server components we're going to look at layouts the new API route handlers so all that stuff now I just want to mentio... Read More

Key Insights

• The app directory is Next.js 13's new structure where everything lives, including pages, components, and API route handlers. It is enabled by choosing the experimental app directory option during create-next-app, which sets appDir to true in the config.
• Routing works by folders, not files, in the app directory. To create an /about route you make a folder called about containing a page.js or page.jsx file, unlike older versions where you placed an about.js file directly in the Pages folder.
• Nested routes are built by nesting folders. For about/team you create a team folder inside about with its own page.js, and you can nest further such as about/team/brad by adding another folder inside team.
• The link component changed so you no longer put an a tag inside it. Classes and the href now go directly on the link component itself, imported from next/link, rather than on a nested anchor tag.
• Layouts use a layout.js file that wraps everything. The root layout is a component called RootLayout that receives children and holds the HTML and body tags, so anything wanted on every page like a header goes here.
• Separate layouts can be scoped per route by adding a layout.js or layout.jsx file inside a route folder like about. This about layout takes props including children and outputs children wherever the layout should render the page.
• Custom loading states are automatic in server components. Creating a file called loading.js or loading.jsx shows a loader automatically, so you do not have to write conditional if-loading logic in your server components.
• Suspense boundaries let you load data progressively. When making multiple requests you can show a placeholder for content that takes longer rather than waiting for everything, giving the user a better overall experience.

Questions & Answers

Q: How do you set up a Next.js 13 project with the app directory?

Use npx create-next-app@latest, since at this time the new app directory structure requires the latest version. When prompted, answer the setup questions: give a project name, and in the tutorial the author says no to TypeScript, no to ESLint, no to a source directory, and yes to the experimental app directory. The import alias is kept at the @ symbol so you can import from deep in the directory without repeated ../ paths. This creates a config file with an experimental object where appDir is set to true.

Q: How does routing work in the Next.js 13 app directory?

Routing works by folders rather than files. In past versions you added an about.js file to the Pages folder to get a /about route. In Next.js 13 with the app directory, you instead create a folder named about and inside it add a page.js or page.jsx file containing the component. Every custom route you create is a folder name, not a file name, and the page file holds the component that renders at that route.

Q: How do you create nested routes in Next.js 13?

Nested routes are created by nesting folders. For an about/team route, you do not put a team.js file in the about folder. Instead you create a new folder called team inside the about folder, then add a page.js or page.jsx inside team with the team component. You can nest even further, so putting a folder called brad inside team lets you reach about/team/brad. Each level of nesting is another folder containing its own page file.

Q: What changed with the link component in Next.js 13?

The link component works differently in Next.js 13. You no longer put an a tag inside the link. Previously, if you wanted to add a class you would put it on the a tag nested within the link. Now you put the class and the href directly on the link component itself. The link component is still imported from next/link. In the tutorial the author adds links with hrefs going to slash, slash about, and slash about slash team.

Q: How do layouts work with the app directory?

The app directory uses a layout.js file that wraps everything. In older Next.js versions you had an underscore app.js as your main app component and created your own layout to wrap things. Now there is a root layout, a component called RootLayout that receives children, which is every other page and route you create. The root layout is also where the HTML and body tags live, so anything you want on every page, such as a header, gets brought into and embedded in this layout component.

Q: Can you create separate layouts for specific routes?

Yes, you can have separate layouts scoped to specific routes. Beyond the main root layout, you can go into a route folder such as about and create a file called layout.js or layout.jsx. In the tutorial the author creates an about layout component. Like the root layout, it takes in props including children, and wherever you want the page content to appear in the layout you output children. This lets that route and its nested routes share a layout distinct from the root.

Q: How do you show a loading state in Next.js 13 server components?

Loading states are automatic. If you create a file called loading.js or loading.jsx, a loader will show automatically. This means you do not have to write conditional logic like if loading in your server components. In the tutorial, the loader appears while data is fetched from the GitHub API. This built-in behavior handles the loading UI for you, which the author describes as really cool because it removes the need to manually manage loading conditions in the component code.

Q: What are suspense boundaries used for in this tutorial?

Suspense boundaries let you load data progressively for a better user experience. When making multiple requests, such as fetching a single repo and its directories from the GitHub API, some data may take longer to arrive. With a suspense boundary you can put a placeholder in place for the slower content rather than waiting for everything to load at once. In the demo, the directories come in a few seconds after the rest of the page, loading in via the suspense boundary while the rest of the content displays immediately.

Summary & Key Takeaways

• The tutorial builds a project showing courses on a home page, using route handlers that replace previous API routes to serve and search courses. It covers setup with create-next-app at latest, choosing the experimental app directory, and skipping TypeScript, ESLint, and a source directory to keep things simple.

• Routing in the app directory uses folders instead of files: each custom route is a folder containing a page.js or page.jsx file, and nesting folders creates nested routes like about/team. The link component from next/link now takes the href and class directly rather than wrapping an a tag.

• Layouts use a root layout.js component that wraps all children and contains the HTML and body tags, ideal for headers. Route-specific layouts can be added per folder. Server components fetch data directly, a loading.js file auto-shows a loader, and suspense boundaries render placeholders for slower data.