NextJS DynamicServerError Cookies, Header, and nextUrl.searchParams

Question

I've been building a Blog engine tool for a while now. I got it to work, and everything was perfect. Until I ran npm run build and tried to host it in Vercel. It now shows three error messages, with the same error code DynamicServerError. Here are the three errors that occur on build:

Dynamic server usage: Page couldn't be rendered statically because it used 'nextUrl.searchParams'

Dynamic server usage: Page couldn't be rendered statically because it used 'cookies'

Dynamic server usage: Page couldn't be rendered statically because it used 'headers'

I've tried everything Google seems to say, including adding export const dynamic = 'force-dynamic', but nothing seems to work.

The codebase is open-sourced: https://github.com/incogiscool/atom and the instructions to host it locally is in the README. I would love some help because I've been working on this issue for a few days with no results.

Thanks in advance for any responses!

Answer 1

It turns out that derivatives from the request on the server side shouldn't be in a try/catch statement.

Example:

This was my original code.

export const GET = async (request: Request) => {
  try {
  const authHeader = request.headers.get("Authorization");

    if (!authHeader) throw new Error("Invalid project key.");

    const [authType, project_key] = authHeader.split(" ");

    if (authType !== "Bearer") throw new Error("Must be bearer token.");
...

Change it to this:

export const GET = async (request: Request) => {
  const authHeader = request.headers.get("Authorization");

  try {

    if (!authHeader) throw new Error("Invalid project key.");

    const [authType, project_key] = authHeader.split(" ");

    if (authType !== "Bearer") throw new Error("Must be bearer token.");
...