All language subtitles for 010 Adding Catch-All Routes_Downloadly.ir_en

Now, I did mention two extensions

or variations of this concept here.

And the nested dynamic segments

that was one important aspect of routing

in Next.js when it comes to dynamic routes.

The other important variation or extension

is that you can also define collect all routes

or catch all routes, and what does this mean?

Let's say, we also have a blog sub folder

and now we might have different ways of loading blog posts.

For example, we could get just the slug,

just the idea of a blog post.

So therefore, of course, in there

we could add a file named [id].js.

But maybe we also want to support other URLs

for loading a single blog post.

For example, we want a support /blog/the-id-of-a-post

but maybe we also want to support

/blog/2020/12/the-idea-of-a-post.

To only search for this post

if it was released in December 2020.

Or we just want to load blog/2020/12

to load all blog posts for that specific month in that year.

So, we have different URL formats which we want to support,

and maybe we want to support them all

with the same component, so no matter what the path is

and how many segments it has

we always want to load the same component.

And that's what we can do with such a catch all route.

Instead of just using square brackets,

and then any identifier of our choice

we can add a syntax here or a special notation here,

which you might know from JavaScript.

We can add three dots here,

like the spread operator in JavaScript.

And then, again, any name of your choice.

So, that could be ID, that could be slug.

I'll go for slug here but, again, that name is up to you.

The three dots are not though.

This, of course, is no special file name

from the operating system's perspective.

But Next.js will treat it in a special way,

just as it treats all files with square brackets

in the file name in a special way.

So, how does it treat that file?

Well, we still define a React component in there,

so we could have the blog posts page here, for example,

to load all the blog posts.

But then we don't know if we get, for example,

a path with the year and the month,

or just with the year, or with a specific blog post already,

or some other filter criteria,

depending on what want to support in our page.

So, here, I'll return my good old div

with the h1 tag of the blog posts,

and then export this as a default.

And I will already import useRouter here,

useRouter from next/router, so that we can look

into what the next/router gives us here.

So, therefore, I'll get access

to my router by calling useRouter

and then console.log the good old router.query value again,

like this, and if we now do that and save this,

and we go to /blog/2020/12, for example,

you see I do load the blog posts page.

And, here, we get our query object

with that slug property because I chose slug as a name here

after the three dots, but the three dots are not part

of that property name, as you can tell.

And then, here, we get an array now and that's different.

Before we always got a single value, a single string.

Now, it's an array of strings

for the different segments that were caught.

So, here we caught the 2020,

and the 12 segment separated by slashes in the URL.

But because we defined this as a catch all path

with the three dots here, next.js does catch anything

after blog because we're defining this in the blog folder.

Anything after blog is caught by this page component

and is made available as an array

through that slug property

on that query object in the router object.

And now we could be using these values

to send a request to our database, to filter

for blog posts where the year is 2020 and the month is 12.

And, of course, you could encode

whatever you want here, and you get those values.

So, that's how this works and how you can utilize that.

And that's another important feature,

which sometimes can become important,

and which sometimes can be helpful,

since it allows you to write very dynamic paths,

where not just the individual segment values are dynamic

but even the number of segments are dynamic.

And that's not always what you need, but sometimes it is.

And therefore it is important to know

that Next.js supports this syntax as well.