1

I am trying to deploy my nextjs web app to vercel.

When I deploy my site, I get this:

> Build error occurred
FetchError: request to http://localhost:3000/api/products failed, reason: connect ECONNREFUSED 127.0.0.1:3000

Here I am fetching data on localhost:3000, it works when npm run dev. But now I want to build and deploy my project, I cannot fetch from localhost anymore, and I don't know my domain name yet. So how do I fetch data from my API route when vercel is building my site?

export const getStaticPaths = async () => {
  const res = await fetch("http://localhost:3000/api/products");
  const products = await res.json();

  const paths = products.map((product) => ({
    params: { productId: product.id },
  }));

  return {
    paths: paths,
    fallback: false,
  };
};

export const getStaticProps = async (context) => {
  const res = await fetch(
    `http://localhost:3000/api/products/${context.params.productId}`
  );
  const product = await res.json();

  return {
    props: {
      product,
    },
  };
};
jethro-dev
  • 249
  • 1
  • 5
  • 12
  • Does this answer your question: [Fetch error when building Next.js static website in production](https://stackoverflow.com/a/66206394/1870780)? You should not fetch from an internal API route in `getStaticProps`. Instead, directly import the logic used inside your API route. – juliomalves Jan 07 '22 at 09:00

1 Answers1

0

If frontend and backend are running/hosted on the same server/domain. you don't have to specify hostname it'll point to the same domain as the client.

export const getStaticPaths = async () => {
  const res = await fetch("/api/products");
  // something
};

OR

you can use env variables for the host. Create a .env file on a project root. https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser

.env

NEXT_PUBLIC_ENV = development;

Component

export const getStaticPaths = async () => {
  const url =
    "development" === process.env.NEXT_PUBLIC_ENV
      ? "http://localhost:3000/api/products"
      : "https://example.com/api/products";
  const res = await fetch(url);
  // something
};
Rahul Sharma
  • 9,534
  • 1
  • 15
  • 37
  • This is not working. I get this error ```TypeError: Only absolute URLs are supported```. – jethro-dev Jan 07 '22 at 05:28
  • which one is not working? – Rahul Sharma Jan 07 '22 at 05:29
  • I can't even fetch data in ```npm run dev``` with ```fetch("/api/products")```. I had to add ```localhost:3000``` before the URL.. but I can't deploy my site if I fetch from ```localhost```. – jethro-dev Jan 07 '22 at 05:30
  • I tried both, I think it is not letting me to use ```/api/products``` and only allow absolute URLs. – jethro-dev Jan 07 '22 at 05:31
  • @obiito01 I think in that case you should go with the .env approach, – Rahul Sharma Jan 07 '22 at 05:36
  • 1
    I tried. It doesn't work as only absolute URLs are supported. But I don't know my domain name before the deployment... – jethro-dev Jan 07 '22 at 05:38
  • @obiito01 I've updated my answer, can you check now 'process.env' is required. – Rahul Sharma Jan 07 '22 at 05:40
  • I have added it. Still, I get the error ```TypeError: Only absolute URLs are supported```. – jethro-dev Jan 07 '22 at 05:44
  • @obiito01 this "development" === process.env.NEXT_PUBLIC_ENV ? "http://localhost:3000/api/products" : "https://example.com/api/products"; – Rahul Sharma Jan 07 '22 at 05:45
  • Still the same error... But the point is I can only know my URL for the api after deployment. But I have errors during the process of deployment. So I am unable to use know my api URL, in your case the ```https://example.com/api/products```. – jethro-dev Jan 07 '22 at 05:55
  • coding url's within code is bad practice and should be avoided, the app should be able to run under any url, and not be coupled to an environment or hostname. – David B Feb 21 '22 at 09:17