How to set base URL based on environment variable in Next.js?

Question

I have a Strapi backend and Next.js frontend app deployed on DigitalOcean. On DigitalOcean is set an environment variable for the frontend: API_URL = ${APP_URL}/api

I fetch this variable to generate the base url:

// constants.js
export const BASE_URL =
  process.env.NODE_ENV === "production"
    ? process.env.API_URL
    : "http://localhost:1337";

It seems to work fine, the app fetch the content from the backend in localhost and in deploy as well. The problem comes when I try to load images which path should be the concatination of the base url and the fetched relative path. I have created a utilitz function for this:

// utilities.js
import { BASE_URL } from "./constants";
export const getImageURL = (relPath) => `${BASE_URL}${relPath}`;

When I use this function for an html img tag it loads both in dev and in prod environments:

<img src={getImageURL(homePage.Hero[0].Image.url)} />

But when I try to set a background for a div in the same component the base url is undefined and the image doesn't appear in the deployed site (works fine on localhost).

I have no idea why the url generation is OK for some part of the code and not OK for the other.

The build command for deploy is: yarn build && next export -o _static

Here is the full component:

import styles from "../styles/Home.module.css";
import { getImageURL } from "../lib/utilities";
import { useEffect } from "react";
import { BASE_URL } from "../lib/constants";

export default function Home({ homePage }) {
  console.log(BASE_URL); // undefined

  useEffect(() => {
    if (window) {
      console.log(BASE_URL); // undefined
      document.getElementById("container").style.backgroundImage = `url('${getImageURL(homePage.Hero[0].Image.url)}')`; // url is undefined/realtivepath
    }
  });


  return (
    <div id="container">
      <img src={getImageURL(homePage.Hero[0].Image.url)} />
    </div>
  );
}

export const getStaticProps = async () => {
  const res = await fetch(`${BASE_URL}/home-page`); // OK for dev and deploy
  const homePage = await res.json();
  return {
    props: {
      homePage,
    },
  };
};

Can you share your `next.config.js` file? – felixmosh Apr 24 '21 at 10:37 — felixmosh, Apr 24 '21 at 10:37

score 16 · Accepted Answer · answered Apr 24 '21 at 10:41

16

By default, Next.js not exposing all process.env.X variables, due to security concerns, to the browser.

In order to expose environment variable to the browser it must have a prefix of NEXT_PUBLIC_ in the name.

In your case, rename API_URL to NEXT_PUBLIC_API_URL, and use it.

For more info: https://nextjs.org/docs/basic-features/environment-variables

answered Apr 24 '21 at 10:41

felixmosh

32,615
9
69
88

What if you have multiple services, how to select the correct env? Seems everything loads under 'production' – Oliver Dixon Jul 17 '21 at 15:23
I'm not sure by "multiple services", next.js is one process, which load `.env` file – felixmosh Jul 18 '21 at 12:58
For example, staging, production and dev might be cloud services that all require production builds. – Oliver Dixon Jul 18 '21 at 13:06
You need to create 3 separate env files, one for each environment, and provide the correct one depending to the running env (staging, prod, dev) – felixmosh Jul 18 '21 at 14:10
Yes, I got that but how do we push those automatically? – Oliver Dixon Jul 18 '21 at 14:47
It is your work to find some way, it is not related to Next.js – felixmosh Jul 18 '21 at 15:10
but it is. For example; if we have a build command ```deploy-staging``` there's no way to make it load staging env though package.json. – Oliver Dixon Jul 18 '21 at 17:34
1

There is, look at this: https://stackoverflow.com/a/61750672/2522105 – nunorbatista Jul 22 '21 at 15:35

score 0 · Answer 2 · edited Jun 09 '23 at 14:55

0

I achieve it like this

const fetchProducts = async () => {
  const response = await fetch(`${process.env.NEXT_PUBLIC_APP_API_ENDPOINT}/products`);
  const data = await response.json();
  setProducts(data.products);
};

edited Jun 09 '23 at 14:55

Tyler2P

2,324
26
22
31

answered Jun 09 '23 at 13:44

Maaz ali khan

1
1

How to set base URL based on environment variable in Next.js?

2 Answers2