Home > Back-end >  NEXT JS TypeError: Failed to parse URL from /api/projects OR Error: connect ECONNREFUSED 127.0.0.1:3
NEXT JS TypeError: Failed to parse URL from /api/projects OR Error: connect ECONNREFUSED 127.0.0.1:3

Time:12-31

im using

export const getStaticProps = async () => {
export const getStaticPaths = async () => {

and access to my api (pages/api/proyects/)created with next js in my local host

  const res = await fetch("http://localhost:3000/api/projects");

when i build the app in netlify i get this error connect ECONNREFUSED 127.0.0.1:3000 So i try to change the url just to "/api/projects/"

  const res = await fetch("/api/projects/");

but i get a new error "TypeError: Failed to parse URL from /api/project" so thats say that next js needs a complete url to access to the data,

my final URL in netlify is https://v2ds.netlify.app, so i think that i need first my api running, but how i gonna do it if to get my api running i need to deploy my app?

"netlify wants this:"

const res = await fetch("https://v2ds.netlify.app/api/projects/");

but how i acces to the api if the application has not been built for the first time? im working with getStaticProps, getStaticPaths mongoose and the API by next js

so the final question is how i deploy my app to netlify and access to the data in build moment?

thanks, wish you can help me

CodePudding user response:

Check if your mongod terminal are properly connected with mongosh database.

CodePudding user response:

You can achieve this by separating api request base URL, according to the running environment. For ex.

let's create an component called checkEnvironment and then just return base URL from the component.

export const checkEnvironment = () => {
  let base_url =
    process.env.NODE_ENV === "development"
      ? "http://localhost:3000"
      : "https://example.com"; // https://v2ds.netlify.app

  return base_url;
};

and then just use this in your getStaticProps like this :

export const getStaticProps = async (ctx: any) => {
    const posts = await fetch(checkEnvironment().concat("/api/posts"));
    const json = await posts.json();
  
    return {
      props: { data: json },
    };
};
  • Related