All language subtitles for 007 Adding Dynamic Paths & Routes_Downloadly.ir_en

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.