So what's up with this error.
Now good thing is this error actually tells us the solution
though of course, we don't really understand
why we need that solution.
Well, keep in mind that currently
Next.js is pre-generating all the pages.
And I mentioned that it would pre-generate pages by default.
It turns out this is not the case
if you have a dynamic page,
so where the name of the component has such square brackets.
If you have a dynamic segment leading to that page,
if you have that,
the default behavior is not to pre-generate the page.
And why is that not the default,
because keep in mind that technically
for a this page, we won't just have one page,
but multiple pages for different IDs,
we have technically different pages
which have kind of the same frame
and the same general HTML content,
but different data.
This page can be loaded /P1/P2/P1000.
So Next.js doesn't know in advance,
how many pages it needs to pre-generate
for this dynamic page.
It doesn't know which values for PID
will eventually be supported.
And because it doesn't know that
dynamic pages like this are not pre-generated by default
instead they are always generated
just in time on the server,
Which is why it worked before.
But it's now not working anymore
because we added get static props.
And as I mentioned,
when you add this function to a page component file,
then you tell Next.js that you want to pre-render
this page in advance.
For index.js that didn't make a difference
there it was default anyways,
but for this dynamic page it does make a difference
because they it was not the default
for the reasons mentioned
Next.js has no chance of knowing how many pages you need
and which concrete values of this dynamic segment you need.
That's why for such dynamic routes,
we need to give Next.js more information.
We can also tell Next.js which paths.
So which instances off a dynamic page
should be pre-generated.
Because here we don't just need data
we also need to let Next.js know which ID values,
which dynamic segment values will be available
and for which values a page should be pre-generated.
So that multiple instances of that page blueprint
can be pre-generated by Next.js.
And we do inform Next.js about this with another function
we can add on the page.
So another function we can add in this page file,
and that's the getStaticPaths function,
which also is a async.
So where you can also use the await keyword
and just ask get static props.
That's a function which you can add
to your page component files and only there.
So not in any other component files
and you need to export it to make Next.js aware of it.
And now let's explore how this function works
and how we use it.