Estoy tratando de implementar mi aplicación web nextjs en vercel.
Cuando implemento mi sitio, obtengo esto:
> Build error occurred FetchError: request to http://localhost:3000/api/products failed, reason: connect ECONNREFUSED 127.0.0.1:3000 Aquí estoy obteniendo datos en localhost:3000 , funciona cuando npm run dev . Pero ahora quiero compilar e implementar mi proyecto, ya no puedo obtenerlo de localhost y aún no sé mi nombre de dominio. Entonces, ¿cómo obtengo datos de mi ruta API cuando vercel está construyendo 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, }, }; };Si el frontend y el backend se ejecutan/alojan en el mismo servidor/dominio. no tiene que especificar el nombre de host, apuntará al mismo dominio que el cliente.
export const getStaticPaths = async () => { const res = await fetch("/api/products"); // something };O
puede usar variables env para el host. Cree un archivo .env en la raíz de un proyecto. https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser
.env
NEXT_PUBLIC_ENV = development;Componente
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 };