So now that we have a solid understanding
of how we can generally set up routes
and also work with regular components,
before we dive into that Meals app,
there's just one other route type I also wanna
explore together with you.
Because let's say we also wanna have a blog route in here.
So of course we could add a blog folder in the app directory
and add a page.js file in there.
But let's then say, we also wanna have different blog posts.
So that nested in that blog folder,
we have a post-1 folder, a post-2 folder, and so on.
And of course, this then doesn't lead anywhere
because this would mean that we need to add a new folder
whenever a new blog post is added to the database
or wherever we're storing them, and that is not scalable
and not maintainable.
So what we need here
for these posts is a so-called dynamic route,
a route which we only define once,
but which is then capable of rendering different pages
for different blog posts.
And in NextJS, we can create such a dynamic route
by adding a nested folder where we use square brackets.
This is a special syntax supported by NextJS,
where you then put any placeholder, any identifier
of your choice between those square brackets, for example,
slug, or whatever you want.
And this placeholder will become important later.
Then we again, need a page.js file
because of course we want to render some content.
And if you want to build a new page,
that should be visitable, you need a page.js file.
Now let's start with the page.js file directly
in the blog folder though.
There we could of course export a component called BlogPage
where we then return this main element maybe
and say, "The Blog".
And then here I want to have, let's say, two paragraphs
with links to different blog posts.
So I'll use that link component
and import that from next/link.
And then here, let's say we wanna have one blog post
under "/blog/post-1" like this,
but then we also wanna have a second one
that leads to Post 2 here in that path.
So almost the same path,
but different segments here at the end.
Now we need to go to that page.js file in that slug folder,
in that square brackets slug folder.
And here of course,
we also should export a component function,
the blog post page, for example.
And there we can again, return the main element
and say "Blog Post", and we'll make this more dynamic later.
With that, if we save everything
and you go back, you will see that if you visit /blog,
you have these two links,
and if you click them, indeed you're taken
to that blog post page.
And that works for both links.
And as you can tell, if you take a look
at this URL, it changes.
We have post-2 here as a segment after /blog
and post-1 for that other link.
But it's the same page.js file becoming active
for different segment values, so
for different path segment values.
And that is what is achieved with
that dynamic route syntax here.
This square bracket thing here simply tells NextJS
that we want to have some path segment
after blog in this case,
but that we don't know the exact value of the segment yet.
And it's then this placeholder, this identifier slug
that will give us access to the concrete value
that we do get when that route is loaded.
Because NextJS actually passes a props object
to all those page components.
And all these page components get one special prop,
which you can pull out with help of destructuring,
and that's a params prop, which again,
is set by NextJS.
You don't have to pass it manually
because you're not rendering these components manually.
Instead, NextJS is doing that for you,
and it is setting this prop for you.
And what's inside of this params prop?
Well, this will be an object
where every placeholder you had in such a dynamic route here
will be a key.
And the value stored under
that key will be the concrete value encoded in the URL.
So post-1, for example.
And you can see that if you output it
by accessing params.slug here in this case,
in this page here.
If you do that, you see post-1 here.
If I enter anything-else here, you see anything-else here.
And this is a great feature
because this would now allow you to, for example, reach out
to a database where your blog posts might be stored
and fetch the blog post with that slug so
that you can then show its content on this page instead.
And that's how you can set up such dynamic routes.
Now, NextJS has way more to offer.
You can also set up custom not found pages, deal
with errors, add more pages, fetch data, change data,
and we'll do all that, but not in this demo project.
Instead by working on that Meals app I showed you before.