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.