[Maximilian Schwarzmuller] And that is it
for this course section.
We've now had a detailed look at file based routing
and how we set up pages and how we navigate between pages
with Next.js.
We had a look at the pages directory and that the files
and folders in there have a special meaning.
Index JS is always treated as a route page
for the given folder.
So either the overall route page, if it's an index
JS file in pages or in portfolio or other sub folders,
Index JS would be loaded for /portfolio/ nothing.
We also can have other file names to, for example,
load/portfolio/list, and then load this list page component.
And we can also have dynamic segments
by enclosing placeholder identifiers in square brackets
and then loading different kinds of data
for different concrete values we might be getting.
And we get access to the concrete value entered
for a POV segment, through the use router hook,
as you learned.
Now, we can also have nested dynamic segments
as we did with clients.
And we can also have such catch-all files here
by having square brackets and then three dots
in front of any identifier of our choice.
And that allows us to catch multiple dynamic segments
in one go.
And all these are very powerful features
for loading pages in exactly the way you need.
Now for navigating around we want to use the link
component provided by Next.js
or, if we need to navigate programmatically,
we can do that through that router object
which we get through use router or in class-based components
through to with router, higher order component.
And therefore, we now know what file-based routing is
and how it works.
But is that now better than the code-based approach
we know from standard react projects
that do not use Next.js
Ultimately that is, of course, up to you to decide
but I want to give you my perspective on that
and a small comparison I came up with.
When we compare file-based routing, which we get
with Next.js to this standard code-based routing
we have in standard react apps with react router,
then in the case of file-based routing,
we have no extra boiler plate code that needs to be written.
So this kind of route configuration, which we need to write
in our react components when using react router,
that is not required with Next.js
and the file-based routing system.
Instead of writing this boiler plate code,
we simply create component files,
which we would need to do anyways,
and we just store them in a structure that replicates
the path we want to have in our URL in the end.
And that in my opinion is a very natural way of, well,
setting up all our page components
and of storing our page components.
So therefore, we do something we need to do anyways,
and we save the other part of creating extra code,
just to tell react which components
should be loaded for which path.
We combined that into one step instead.
Therefore, in my opinion, that's a very intuitive system
of creating components and of storing components
and of setting up routing, therefore.
We don't need to do anything for that.
We get the routing for free, if you want to call it
like that.
So with file-based routing the file and folder structure
we have is everything that influences our routes.
And we, therefore, fully control the POVs we support
in our application, through our folder structure
in that pages folder.
Now for navigating around, we use a link component
and we can also navigate imperatively,
so there's nothing special about that.
Now for a code-based routing, we do have
that extra boiler plate set up in code.
Though, of course, you could argue that by doing that,
you have some code where you can see
which routes are supported.
You don't need to look at the file system
though I would argue that looking
at the file system wouldn't be too difficult,
but of course, ultimately that's of course,
up to you to judge.
Now, it is definitely straightforward,
don't get me wrong, but it includes new components
and concepts, which you need to learn,
like that switch component, and that route component
and how to order your routes and so on.
So that can be annoying.
Now a potential advantage, of course,
is that the file and folders set up,
does not matter at all.
In my opinion, having the folder structure
dictate the POS is an advantage
but you could see this as a disadvantage as well.
And with code-based routing you can store your component
files wherever you want.
They won't have any influence on your routes or your POS.
Now navigation works pretty much as it does with Next.js.
You have a link component
and you can also navigate imperatively there.
So no differences there.
Therefore, overall, in my opinion,
file-based routing is more intuitive
and is easier to set up, but it is, of course,
up to you to judge.
Either way, it is how Next.js thinks about pages and routes.
And therefore, when working with Next.js
you want to embrace that file-based approach.