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.