Stack Exchange
Next JS Fetch error "getaddrinfo ENOTFOUND" in Vercel build
I'm getting a build error happening in production only, this code runs locally without issue:
Front end component:
const Home = ({ newTake }) => {
  const [take, setTake] = useState(newTake);
  const [loading, setLoading] = useState(false);

  return (
    <TakeContext.Provider value={{ take, setTake }}>
      <div className={styles.root}>
        <Header />
        {loading ? (
          <div
            className={styles.ldsHourglass}
            style={{ margin: "50px 0px 50px 0px" }}
          />
        ) : (
          <Tweet />
        )}
        {/* <NewTake generateTake={generateTake} /> */}
      </div>
    </TakeContext.Provider>
  );
};

Data fetching component:
export const getStaticProps = async () => {
  const response = await fetch(`${API_URL}/hoopsbot/random`, {
    headers: {
      Authorization: `bearer ${API_BEARER_TOKEN}`,
    },
  })
    .then((response) => response.json())
    .catch((error) => {
      throw new Error(error);
    });

  return {
    props: {
      newTake: response,
    },
  };
};

Locally, this returns a json body just fine (where the API URL is my localhost) but I get the following build error in production (API url omitted):
Error: FetchError: request to https://api.************* failed, reason: getaddrinfo ENOTFOUND api.***********

I've tried all sorts of variations of data fetching, using the _api folder, getServerSideProps, using axios instead of fetch, but nothing works on production.

I am seeing the same thing. I have docker containers for a django backend and a nextjs frontend. When I build the containers the backend isn't online yet and it seems like the prerendering is trying to resolve the URL.

Did anyone find a solution to this?
