Codevolution · Transcript · · Updated
Next.js 15 Tutorial - 6 - Nested Routes – Transcript
Video by Codevolution · Watch the original on YouTube
Summary
AI-generated from the transcript. Verify details against the source video.
- Next.js uses a file-based routing system where page.tsx files in the app folder map to a root domain and subfolders create routes matching folder names.
- To set up nested routes for blog paths, a blog folder is created inside the app directory with its own page.tsx file.
- Creating first and second subfolders inside the blog folder with individual page.tsx files handles the nested routes for blog first and blog second.
Use this video with Pro
Reading, copying and transcript downloads are free. Create saved AI results for this video with a signed-in Pro account ($9/month).
Transcript
Search ignores accents. All transcript text stays visible.
previously we got a glimpse of NEX js's file based routing system we saw how the page. TSX file in the app folder maps to a root domain and how page. TSX files in subfolders create routes matching their folder names like about and profile now let's tackle nested routes in scenario 3 we need to set up a page that shows up when users visit Local Host 3000 SL blog
we will also need to handle two additional routes localhost 3000 /blog slir and luos 3000 blog2 let me show you how easy this is with the app router first up let's create a block folder inside our app directory inside this block folder we will add page. TSX file with a simple
react component exported as default so page. TSX and the react component export default function blog that returns an H1 tag my blog if we save this and check localhost 3000 SL blog we will see our blog page right away that takes care of the first part of scenario 3 but what about these
nested routes SL blog slir and SL blog SLC this is where nexs really shines we can simply create two new folders inside the block folder named first and second so new folder first new folder second in each folder we will create a page. TSX file with its own component exported as
default page. TSX and another page. TSX we export a default function called first blog that returns an H1 tag first blog post and in the other we export a default function second blog that returns an H1 tag second blog post save the files navigate
to localhost 3000 /blog slfirst and you will see the first Blog Page render exactly where it should and similarly when you navigate to /blog SLC you will see the second block page just like that we have implemented scenario number three here's a visualization of how these nested routes work page. TSX in the app folder corresponds to the root route page. TSX
in the block folder corresponds to SL blog page. TSX in the first folder corresponds to SL blog slir and similarly /blog second the key takeaway here is that nexs mirrors your folder structure in your URLs automatically it is that simple up next we will check out something even more powerful Dynamic routes supporting the channel is free please like And subscribe it helps a lot