All language subtitles for 014 Using _getStaticPaths__Downloadly.ir_en

So let's solve this error

with the getStaticPaths function.

For this in our pid.js file,

I simply export another function.

Another async function called getStaticPaths.

And just like getStaticProps,

you must make sure that you have no typo in there

because Next.js will look for this function specifically.

Now the goal of this function

is to tell Next.js which instances of this dynamic page

should be generated.

Therefore, this should return an object,

just as getStaticProps does,

but an object with different kinds of values.

An object where you have a paths key.

And that's now an array, an array full of objects.

So that is a given structure, which you must return here.

Now in this object, you must add a params key now,

and that holds another object

where you have a bunch of key value pairs

where the keys are all the different

dynamic segment identifiers that might lead to this page.

If that would be nested deeper in a folder

where the folder name is also dynamic,

you could have multiple identifiers.

Here it's only one.

So pid, and the values are then the concrete values

for which this page should be generated.

So here, for example,

we know that we want to generate this page three times

for p one, p two, and p three

as values for this dynamic page identifier here.

And therefore I'll set pid here to p one.

And then I will repeat that.

So now we just create another object

where params is set to another object with pid p two.

And we now repeat this a third time here.

So another object where params is then set

to p three, like this.

Now this tells Next.js that this dynamic page here

should be pre-generated three times with these three values

as a value for this dynamic segment identifier.

And then Next.js will call getStaticProps three times

for these different ideas.

And we then can extract that ID like this

inside of this function.

Now for this to work,

we also need to add another key next to paths,

and that's the fallback key,

which for the moment should be set to false.

I'll come back to that later.

For the moment, set it to false.

And then if you save everything, you will see

that if you will load local host 3000 slash p two,

for example, you have the Product Two page.

If I go back to the starting page

and I click on product three,

I have product three data here.

And now that is displayed correctly and successfully

because it was pre-generated successfully by Next.js.

And therefore getStaticPaths is required

to tell Next.js which concrete instances

of this dynamic page must be pre-generated.