How to get absolute URL in production?

The problem I’m facing is that I’m unable to get the absolute URL in the production build when using getStaticPaths and getStaticProps

export async function getStaticPaths() {
  const url =
    process.env.NODE_ENV === "development"
      ? "http://localhost:3000"
      : "https://websitename.vercel.app";
  const res = await fetch(`${url}/api/posts`);
  const posts = await res.json();
  console.log("posts: ", posts);

  const paths = posts.map(({ slug }) => ({
    params: { slug },
  }));

  console.log("Paths: ", paths);

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  console.log("params: ", params);
  const url =
    process.env.NODE_ENV === "development"
      ? "http://localhost:3000"
      : "https://websitename.vercel.app";
  const res = await fetch(`${url}/api/post`, {
    method: "POST",
    body: params.slug,
  });
  const post = await res.json();

  return {
    props: { post },
  };
}

It works fine in the development build but when it comes to production it fails because the hardcoded https://websitename.vercel.app is not the one generated by vercel. The URL generated by vercel is something like this websitename-q1hdjf6c2.vercel.app.

How do I fix this?

Answer

you can use ${process.env.VERCEL_URL}/my/route.

Check

Vercel environment variables

Advertisement

Answer