Original subtitles

[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.