So now we all to learn about
those nested folders to construct
nested more complex puffs,
or as an alternative to having a file off the same name,
but maybe you all remember
that last use case down there with the square brackets.
This can be used to have a dynamic path
with a dynamic path segment.
And that's another key feature Next.js offers to us.
Let's say here in this very simple dummy application
we are working on in our portfolio folder,
we don't just want to have the route path
forward slash portfolio and the list path,
but we also have different portfolio items
different portfolio projects let's say,
and those projects might have different ideas or slugs,
and we want to load the different data in the same kind
of component for those different slugs or IDs.
That's exactly where we would create
such a dynamic route component.
And here the naming pattern is always exactly the same,
you use square brackets,
and then of course still .js
because it's still a JavaScript file.
And inside of the square brackets,
any identifier of your choice.
So this is up to you,
it doesn't have to be ID,
it just very often will be some kind of ID,
but that's up to you,
it could, for example, be project ID.,
just to really emphasize that this
can be any term you want.
The square brackets matter though,
because those tell Next.js
that here we don't wanna have
slash portfolio, slash project ID,
but that instead this is a placeholder
for any kind of value which we then will have access
to in the component to load different kinds of data,
but that will be the next step.
So therefore let's know save this,
and even though this might look strange,
this is a perfectly valid file name.
And now in here we can create a new function,
the portfolio project page function maybe,
where we returned and number div where we say
the portfolio project page.
And then just as before we simply
export this page component.
Now how can we load this component or this page?
Well, it's a place holder as I said,
and it's in the portfolio folder,
hence what we can do,
is we can enter portfolio slash,
and then any value of your choice,
for example something
and you see the portfolio project page.
Also if we use slash one instead of slash something,
or slash hello,
so whatever value we enter here,
this is valid because here we defined
that we wanna accept any value that
we just have a placeholder here and now we're filling
in that concrete value for that placeholder.
Please also notice though, that slash list
still loads the list page,
since Next.js is smart and checks your other files as well.
So if it sees that a value could be treated as a value
for this placeholder,
it all checks if you maybe have a more
concrete file for that exact value.
So for a slash list after slash portfolio,
it sees that there is a list file in the portfolio folder
and it prioritize a that file over this dynamic file.
And that's a great behavior,
because it means that you can have
static predefined route page files,
next to dynamic ones like this one.
But what can we now do with that file?
It's a placeholder,
but what's the real benefit we get
by using such a placeholder.
As I said a common scenario
for using such a dynamic page would be,
that you have the same kind of page
that should be loaded for different pieces of data,
different products in our shop
or different blog posts in a blog,
or like in this case, different projects
we wanna show on our portfolio page, for example.
So therefore now inside of this page component,
we typically now wanna use the concrete value
that was entered,
so the concrete project ID here,
and then probably reach out to some database
or something like this,
fetch data from there,
and then use that concrete data
in this component to bring that data to the screen.