Introducing the App Router

Next.js comes with a special paradigm for structuring applications called the App Router. The App Router makes use of the folder structure in the src/app/ folder to create routes for our apps. The root folder (/ path) is src/app/. If we want to define a path, such as /posts, we need to create a src/app/posts/ folder. To make this folder a valid route, we need to put a page.js file inside it, which contains the page component that will be rendered when visiting that route.

Note

Alternatively, we can put a route.js file into a folder to turn it into an API route instead of rendering a page. We are going to learn more about API routes in Chapter 18, Advanced Next.js Concepts and Optimizations.

Additionally, Next.js allows us to define a layout.js file, which will be used as the layout for a certain path. The layout component accepts children, which can contain other layouts or pages. This flexibility allows us to define nested routes with sub-layouts...