Next.js 14 Tutorial - 6 - Nested Routes

welcome back everyone in the previous video we got a glimpse of the file-based routing feature in XJ we learned that the page. TSX file within the app folder corresponds to The Domain route and page. TSX files within the subfolders are associated with routes based on their folder names such as about and profile in this video Let's dive into working with nested routes scenario number three requires us to render a page when the user navigates to the URL localhost Port 3000 blog additionally we need to render a page for localhost 3000 SL blog slir and another route for lose 3000 blog2 let's see how we can achieve this using the app router to begin let's create a new folder called blog within the app folder within the block folder we'll create a page. TSX file where we will Define and Export a react component export default function blog and we return in each one my blog after saving the file let's head back to the browser and navigate to localhost 3000 SL blog as expected we should now see the blog page this completes the first part of scenario 3 however the question remains how do we Implement slash blog slir and SL blog SLC as nested routes well nexs simplifies this process by allowing us to Nest folders inside the app folder let's create two new folders within app SL blog called first and second inside each folder we will create a page. TSX file and Define a simple component to be exported so new file page. TSX we can copy the component code paste it and change the component name to First blog and the heading to First blog post we can now create another page. TSX file within the second folder copy the first blog component code and change occurrences of first to second once we have saved both files let's head back to the browser now when we visit SL blog slir we'll see the first blog post page and when we navigate to /blog SLC we will see the second blog post page scenario 3 has been successfully implemented here is a visualization of nested routes we have our root route our blog route the first block post route and the second block post route the key takeaway here is that by creating a nested folder structure files will automatically be routed in the same way within the URL in the next video we will explore Dynamic routes thank you for watching and I'll see you in the next one

Channel: Codevolution

Views: 81,216

Keywords: Codevolution, React, Next.js, Next.js 14, Next.js Tutorial, Next.js 14 Tutorial, Next.js Tutorials, Next.js for Beginners, Next.js 14 Tutorials, Next.js 14 Tutorial for Beginners, App Router, Next.js React Server Components, Next.js Routing, Next.js Data Fetching, Nested Routes, Nested Routes in Next.js 14, Nested Routes in Next.js

Id: mEral6yz130

Length: 3min 51sec (231 seconds)

Published: Wed Nov 08 2023