Original subtitles

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?