Now we can add more and more pages
by adding more and more files here.
But at some point you might want to structure your pages
in a different way, or you need some deeply
nested path consisting of multiple segments.
In such cases, you can add folders to the pages folder.
For example, here, we could add the word
folio folder
and in that folder inside of the portfolio folder,
add an index JS file.
So again, this special name
but now nested in the portfolio.
Now in there, we can again create a function
the portfolio of page function.
And of course that's just another react component
which we're adding.
And here we could add
the word folio page as the content
and then export this default portfolio page like this.
If we do that and save everything,
we can also visit slash portfolio here,
and we see The Portfolio Page.
Therefore, this is an equivalent
to creating a file named portfolio JS
one level above that folder.
So instead of about JS,
we could have created an about folder,
and in that about folder
we could have added an index.js file,
and then we could also have our About Page component
in this index.js file in the about folder
instead of having the about JS file here.
So now I deleted this about JS file
and if we save everything we can still visit slash about.
So that is a perfect replacement.
That is an alternative.
And it's up to you what you prefer.
If you want to have sub folders to structure that
or if you want to have files with that name.
Now Sub folders don't just exist
so that we have an alternative to a file named about though.
Instead we need them if we want to create POS
that consists of multiple segments,
of for example, in portfolio
if we want to have let's say a list JS file
so that we can have a URL off slash portfolio slash list,
then there is no way around having a sub folder
because in there we can now create our List Page,
and return our JSX code here, The List Page.
And of course, just as before then export this List Page.
But now with that,
we can visit slash port folios slash list.
And we see that, but there wouldn't have been another way
of getting this to work without that portfolio folder,
we could not create this nest the path.
So that is a use case
where we then definitely need nested folders.
And of course in general,
having some kind of structure in the pages folder
and working with sub folders
for grouping files together isn't a bad idea in general,
because of course that allows you
to keep your files more organized,
especially if you're working on websites
with dozens or hundreds of pages.