All language subtitles for 009 Adding Nested Paths & Pages (Nested Routes)_en

So now we know about this concept

of using files in the pages folder

for creating routes,

which then load these different components

that live in these files

and we also see that this server-side pre-rendering works

out of the box.

Now, let's dig a bit deeper

into that file-based routing system though.

For example, there is an important alternative

you should be aware of

when it comes to organizing your files and folders.

We've got this index.js file

and that loads the root page or slash nothing

because it's the index.js file directly in the pages folder.

Now, for the news page, /news,

we've got the news.js file.

We always have an alternative

to using such a named file name.

So a file named differently than index.js.

We could also create a news sub-folder

in the pages folder, move news.js in there

and then rename it to index.js

using that special index.js file name again.

Now, this page would still be loaded

by visiting our-domain.com/news

because we're in the news folder.

And that's important.

Folders, which you create in your pages folder also act

as path segments.

And it's totally up to you

whether you wanna go with news.js

in the root pages folder or index.js in the news folder.

Now, it does matter though

as soon as you start creating nested paths,

and that's what I wanna do now.

If we wanna have a path

that is something like news.something-important

where something-important is the identifier

of the specific news item you wanna load,

then you need to create a file in such a sub-folder

because otherwise, you can't create such a nested path.

After all, we have two segments here

and if we just create files directly in the pages folder,

we're limited to one segment, the file name.

So therefore, if we want to have such a nested path,

so more than one segment,

we need to create a sub-folder

and then we can also create the root page

for that path with index.js

and then create the something-important.js file

as a sibling file to index.js.

So now we have two different pages

that start with /news,

/news/ nothing loads the component in the index.js file,

/news/something-important

will load the component we create in here.

Now, of course, here again we could alternatively also

create another nested sub-folder,

something-important with the index.js file in there.

That would again be the alternative

to using such a named file name in the news folder.

But I hope you get the idea by now.

Now, with that, I could copy this code

from index.js in the news folder

and bring it into the something-important page here

and then name this DetailPage maybe

because that should be the page holding the details

for a specific news item

and this page would now be loaded

for /news/something-important.

And hence, if we save everything

and we visit /news, we see The News page,

and if I visit /news/something-important,

then we see The Detail Page.

So that's how this works.

But there is still another important concept

which we have't touched on yet.