Before we start working on our project, we’ll review the new features and concepts introduced in Next.js 13.
If you’ve worked with previous versions of Next.js, you might already be familiar with the pages directory. Any file created inside of the pages directory would act as a route in the UI. For example, pages/home.jsx would take care of the /home route:
Just like files inside of the pages directory, routing with the app directory is controlled via the folders inside of it. The UI for a particular route is defined by a page.jsx file inside of the folder.
Therefore, a folder structure that looks like app/profile/settings/page.jsx will take care of rendering the /profile/settings route:
The new
appdirectory works alongside thepagesdirectory to support incremental adoption and provide other new features like server-side rendering and static-site generation.
Next.js 13: App Directory
In our course, we will put deep focus on the new App Directory architecture introduced in Next.js 13 (stable since )
This page provides an overview of the file and folder structure of a Next.js project. It covers top-level files and folders, configuration files, and routing conventions within the app directory.
Top-Level Folders
Top-Level Files
