We placed our pages in Next's "pages" directory for years.
This is about to change now.
A while ago, Next.js introduced the new App Router, significantly changing how we create pages. But not only the directory in which we store our app's pages changes — but also the available feature.
Where our Next projects used to look like this:
????????? pages
????????? about.js
????????? index.js
????????? team.js
Using the App Router, our app's structure looks similar to this:
src/
????????? app
????????? about
??? ????????? page.js
????????? globals.css
????????? layout.js
????????? login
??? ????????? page.js
????????? page.js
????????? team
????????? route.js
The conventions for creating an app are as follows:
- Every page of our app has its own directory. The directory name defines the URL path.
- The component that is rendered when accessing the path in the browser is page.js.
- We can store other components in the path's directory. These will not affect routing if they are not named page.js.
- A couple of files with reserved names can be placed in each page's directory. All of them hold a particular functionality. For example, there are loading.js, template.js, and layout.js — we will discuss the latter in a second.
So far, so good; we've covered the conventions.
As you can tell, slight refactoring is necessary for existing apps. But what is the motivation for doing so? Here are the new features usable in the App Router.