es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo obtener datos de la ruta de la API de Nextjs al construir y desplegar?

05 Aug, 2023 Programación

Estoy tratando de implementar mi aplicación web de Next.js en Vercel.

Cuando implemento mi sitio, obtengo lo siguiente:

> Se produjo un error de compilación
FetchError: la solicitud a http://localhost:3000/api/products falló, motivo: conexión ECONNREFUSED 127.0.0.1:3000

Aquí estoy obteniendo datos de localhost:3000, funciona cuando ejecuto npm run dev. Pero ahora quiero compilar e implementar mi proyecto, no puedo obtener datos de localhost y aún no conozco mi nombre de dominio. Entonces, ¿cómo puedo obtener datos de mi ruta de API cuando Vercel está compilando mi sitio?

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,
    },
  };
};
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener datos de tu ruta de API al implementar tu aplicación web Next.js en Vercel, puedes cambiar la URL de http://localhost:3000``` a/api/productsy/api/products/${context.params.productId}respectivamente en las funcionesgetStaticPathsygetStaticProps“`.

    Esto se refiere a la misma origen desde la que se sirve tu aplicación, lo que significa que funcionará tanto en el entorno de desarrollo como al implementarse en Vercel.

    Entonces tu código se verá así:

    export const getStaticPaths = async () => {
  const res = await fetch("/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(
    `/api/products/${context.params.productId}`
  );
  const product = await res.json();

  return {
    props: {
      product,
    },
  };
};

    Al cambiar la URL de búsqueda a /api/products, Vercel automáticamente hará proxy a la solicitud y obtendrá los datos desde la ruta de API correspondiente.

Comments are closed.