Learning Next.js Basics

(how to get started on a Next.js project today)

Nesting Routes

If you've been paying attention to the url bar, you should have noticed that, after the home page, the other pages ended in '/page' with the number at the end (essentially ending with the file name).

This is due to Next.js built-in routing where the page url is assigned the file name and can be accessed by importing and using the Link element provided by Next.js (see Page 2 if you need a refresher on Link). But what if you need to nest your routing?

In some cases, like if you have a blog or gallery on your site, you may want to have nested routing to help the user better understand where on the site they are. This can also be helpful for code organization as it just makes sense to keep all of the pages for a particular part of your site (like the blog) in one folder vs having them mixed in with everything else on the site.

Luckily this can be easily accomplished from within your pages folder. All you have to do is add another folder within that folder (in our case we named it page7), then add a .js file inside of that folder (for this page it's part1.js).

Now that you've done that you should be able to type the nested url into the page bar and see your new page. Or you could use Link to navigate like we've been doing.

Page 6
Page 7 Part 2