Creating the detail page like this works,
until we realize that we probably would have
more than one news item on our news site.
It would be very realistic that index.js
and the news folder should output a list of news items.
And then we can click those individual items
and then take into the detailed pages
with the concrete content for the news item we selected.
So we use the same page over and over again
for different news items for different content.
We would probably fetch the concrete content
from some database when a user visits this detail page
and then display it on the screen.
So, it's the same component technically
but with different content.
And that's of course a totally realistic,
I would even say very common scenario.
So hard coding, the identifier,
like something dash important
like this in the file name is not very realistic.
Instead, we wanna create a so-called dynamic page
where the path segment to concrete value
in the path can be dynamic,
so that it's not just slash news,
slash something important,
but also slash something else
or slash this course is great, whatever.
So then this would be the identifier of a news item
and we have a lot of different identifiers
and we add new use all the time,
but we always load the same page
no matter what the concrete value here is.
But then inside of the page,
we simply have access to that value
in the path so that we can fetch the proper data.
And that is something we can implement with dynamic paths.
For that, we change the file name here
to a different file name, and we use a special syntax
which will be understood by nextJS.
We use square brackets here
in the file name in front of the extension.
If you have square brackets in your file name like this,
this tells nextJS that this will be a dynamic page
so that it should be loaded
for different values in your path.
And then you can add an identifier
between those square brackets
where the identifier name is totally up to you.
Something like newsId, for example, like this.
But this again is up to you,
but you need those square brackets.
This then tells nextJS that this page
will be loaded for different values.
So for example, for something important after slash news
but also for any other identifier.
And then in a next step,
I will show you how you can get access
to the concrete value entered here and how you can use that.
But let's get there step by step.
If we now saved as again, if I load this page
for /news/thiscourseisgreat,
I see the detail page,
but I also see for something else
or anything else we enter after slash news.
So that is how we can add such a dynamic path here.
And that is another key feature of nextJS.
It's a feature that allows us to build truly dynamic
and flexible websites with nextJS.
But how can we now extract the entered path value
inside of the component so that we can,
for example, then fetch the correct news item
from a database,
let's say when a user visits this page?