Now we know about API routes,
including dynamic API routes.
Now it is worth a note that
there are some alternatives to how we name
and structure our files inside of the API folder.
And those alternatives are equivalent
to the different approaches we can use
for regular pages.
For example, you can also have catch-all dynamic API routes
by adding free dots in front of any placeholder name
of your choice.
This will then not just handle requests to /API/some value,
but also to more segments you might have.
Equivalent to what you learned about regular pages
and catch-all pages.
Now we don't need a catch-all dynamic API route here
but it is worth knowing about it.
It's all important to understand
how Next.js prioritizes these different files.
If we send the request to /API/feedback,
it's decode into feedback.js file, it will be executed.
Now that is not necessarily obvious
because we have this dynamic API route.
So it could also be possible that requests to /API/feedback
are consumed by this file because feedback is simply treated
as a concrete value for this feedback ID placeholder.
But Next.js is smart just as it is for regular pages.
And if there is a more specific page for a given path value,
so since we have a feedback.js file in this case
it will use that more specific file
which makes more sense for this kind of path
than the more generic dynamic file.
/API some value on the other hand would trigger
the code in the dynamic API route.
So that's just worth knowing.
It automatically works correctly here
but it is important to be aware of the fact
that Next.js will do this prioritization for you.
Now, another important thing to know
is that you have some flexibility
regarding how you structure your files.
You can add a feedback.js file in the API folder
to support requests to /API/feedback.
Alternatively, just as with the regular pages,
you could also add a feedback sub folder in the API folder
and then move to file in there
and rename it to index.js.
And here vscode is asking me
whether it should automatically update all imports
that pointed at this file,
and I will say, yes.
If you don't get the prompt or you chose, no,
you should manually update those import puffs.
So that is the alternative.
A file named index.js in the feedback folder
in the API folder is the equivalent
to having a feedback.js file inside of the API folder,
just as it works for regular pages.
We can also move our feedback ID js file in there.
But if we do that,
that of course also changes the way our API works.
Previously, since feedback ID,
this dynamic API route was directly in the API folder
previously /API some value
triggered the code in this feedback ID file.
Now, since we're in a feedback sub folder,
it's actually /API/feedback/some value
that triggers the code in here.
Now that is actually a path that makes more sense to me.
It's more descriptive,
it's clearer that some requests sent
to /API/feedback/some value
should fetch more details for a single feedback
than if we have just /API/F1.
That doesn't tell us that it's about fetching feedback data
if we just look at this kind of path.
And hence it will keep this structure
of having these square bracket feedback ID file
inside of the feedback folder inside of the API folder.
However, that means that in the index.js file
in the feedback folder, in the regular pages.
So in the feedback page component,
we also need to update this URL
and send our request to /API/feedback/some ID,
because I changed that structure in the API's folder.
And now it looks like I broke some imports as well.
Yes, here we should import from the index file.
And now that works again.
So if I now reload, that all works,
that works, looking good.
So that is how you can also structure your files
and folders in the API folder, in the pages folder.
It essentially works just as it does
for regular pages.