Contenido del Curso
Next.js 14
Next.js 14
How 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:
- Create a new
dashboard
folder inside theapp
folder; - Inside the newly created
dashboard
folder, create a new file calledpage.tsx
; - 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.
¡Gracias por tus comentarios!