Here is the goal I am aiming for:
- Utilize Next.js with App router.
- Establish a backend route
/api/prompt?search=[search_text] - Retrieve and interpret the search query parameter in my
route.tsfile. - Based on the search parameter, send back data to the frontend component.
Everything seems to be going well, except for point #3.
While running the application locally using npm run dev, everything works smoothly. However, when I attempt to build it using npm run build, an unexpected error occurs:
The error message states: DynamicServerError: Dynamic server usage: Page couldn't be rendered statically because it used
nextUrl.searchParams. Further details can be found here: https://nextjs.org/docs/messages/dynamic-server-error
I have reviewed the information provided in the error message but I am struggling to see how it relates to my code. It's possible that I lack a proper understanding of how Next.js operates. I am unsure if this issue stems from something within my code or if it is a bug within Next.js itself.
The expected outcome would be either consistent errors during both the development (npm run dev) and build stages (npm run build), or no errors at all during the build process.
Here is the reference to the router.ts file that I am discussing. This project was inspired by this YouTube tutorial.
Update: By including the parameter in a path segment, I encountered no issues during the build. Therefore, there appears to be a workaround solution available.