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.