Calling the api server side

[leo-petrucci]

I've built an API using Next.js' API functionality. It's great when I need to call it client side as I can just call /api/route/ and I don't have to worry if it's running in localhost or on my server as it will work either way.

However when calling it on the server, in getInitialProps for example, I need to use an absolute url or it won't work.

My current solution is something like this:

  const pageRequest =
    process.env.NODE_ENV === "production"
      ? `https://example.com/api/`
      : `http://localhost:8085/api/`;

This gets really verbose, is there a better solution I'm missing?

[rafaelalmeidatk]

The easiest solution is to read the URL from env vars. Alternatively, with access to the req object, you can get the client URL in the server with

const url = `${protocol}://${req.headers.host}`

Be aware that this makes you vulnerabe to the Host Header Attack, check if your host is protected against it (Vercel isn't vulnerable).

[steida]

For anyone looking for getProtocol helper

https://github.com/zeit/next.js/blob/canary/examples/amp-first/pages/index.js#L242

[rafinskipg]

I use an environment variable per deployment. process.env.API_URL