Calling Next JS Routes in Server Components

So I just started using Vercel and Next JS around June of last year, so I would say I’m still fairly new to it all. One day while using fetch to call a third party API, I kept getting an error like this [ Server ] Error: Failed to parse URL from /api/notion. This error was strange to me, because I’ve used the fetch api numerous times and I’ve never seen it have any issues. The one thing I did notice though, is the fact that base URL is missing. After doing some research, I’ve found that because this is called on the server instead of the client the fetch api takes the URL literal instead of automatically attaching the base url to the string literal.

Not a lot of people know this, but Vercel has a good amount of system environment variables that make differentiating what environment we’re in, the URL that’s being used, and even the region where this app is running, and so much more. You can view the environment variables here. I’ve created a server function that will retrieve the base url depending on what kind of environment that we’re in.

After that you can format your base url string to your api call like so. Thanks for coming to my Ted Talk.