How Next.js Routing Works

The Vercel team has chosen a simple approach to routing. They have decided to use folders as routes. This means the more folders you add to your app folder, the more routes you will get. Additionally, if you create a new folder inside of another folder (route), you will get nested routes. To better understand these concepts, we suggest looking at the image below.

We've sorted out the folder structure, but now, let's dive into the files residing within those folders. Next.js accommodates two distinct file types: page.tsx and layout.tsx. The distinction lies in their roles:

• layout.tsx serves as the file responsible for encapsulating special UI elements shared across multiple pages;
• Conversely, page.tsx takes charge of the UI specific to the current route, dynamically adapting to URL changes. It embodies the visual representation associated with the unique content and features pertinent to the particular route in focus.

Back to the Project

Let's create a nested route called /dashboard for our application. Follow the steps below to accomplish this:

1. Create a new dashboard folder inside the app folder;
2. Inside the newly created dashboard folder, create a new file called page.tsx;
3. Copy and paste the following content into the page.tsx file.

After completing all the necessary steps, open the following URL http://localhost:3000/dashboard. You should see the created page (Dashboard Page text).

In the following chapter, we will continue our work on the pages. But don't worry, we're still going.