1

I created a simple Next.js code that runs fine locally, but has errors during deployment on Vercel:

  1. Use npx create-next-app to create a new Next.js application. Current version is 11.1.0

  2. In pages/index.js add getStaticProps function that gets data from pages/api/hello (the default file created by create-next-app)

    import { API_URL } from 'config'; ... export const getStaticProps = async () => { const res = await fetch(${API_URL}/api/hello); const data = await res.json();

    return { props: { data, revalidate: 1, }, }; };

  3. Under the root create config/index.js and write there

    export const API_URL = process.env.NEXT_PUBLIC_VERCEL_URL || 'http://localhost:3000';

  4. Full version is available on https://github.com/RayaLevinson/next_js_test

  5. Locally (using npm run dev) works fine.

  6. Deploy on Vercel.7. Build error appears: Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

    TypeError: Only absolute URLs are supported

     at getNodeRequestOptions (/vercel/path0/node_modules/node-fetch/lib/index.js:1305:9)

 at /vercel/path0/node_modules/node-fetch/lib/index.js:1410:19
 at new Promise (<anonymous>)

 at Function.fetch [as default] (/vercel/path0/node_modules/node-fetch/lib/index.js:1407:9)
 at fetchWithAgent (/vercel/path0/node_modules/next/dist/server/node-polyfill-fetch.js:38:39)

    at getStaticProps (/vercel/path0/.next/server/pages/index.js:60:21) at renderToHTML (/vercel/path0/node_modules/next/dist/server/render.js:329:30) at async /vercel/path0/node_modules/next/dist/export/worker.js:273:36 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:60:20)

Raya Levinson
  • 53
  • 5
  • 1
    Does this help answer your question: [Fetch error when building Next.js static website in production](https://stackoverflow.com/a/66206394/1870780)? Essentially, you should _not_ fetch from an internal API route in `getStaticProps`. Instead, directly import the logic used inside your API route. – juliomalves Aug 31 '21 at 21:55
  • 1
    Thank you! Full answer is here: [https://nextjs.org/docs/basic-features/data-fetching#write-server-side-code-directl](https://nextjs.org/docs/basic-features/data-fetching#write-server-side-code-directly) – Raya Levinson Sep 03 '21 at 14:57

0 Answers0