2

I have created a pizza ordering app with nextjs on my local server. I am trying to deploy it to vercel and I am running into problem. My github of the app is :- https://github.com/ajaybirbal/nextjs-pizzaapp

See, my app apps homepage is on localhost:3000. My app gets pizza data from localhost:3000/api/pizzas which gives a list of pizza in json format. As a result I have set my env variables as this: -

.env file - https://github.com/ajaybirbal/nextjs-pizzaapp/blob/main/.env.local

URL_API = http://localhost:3000/api/
NEXT_PUBLIC_API_URL = http://localhost:3000/api/

js file that takes values from env file - https://github.com/ajaybirbal/nextjs-pizzaapp/blob/main/services/pizzaApiUrls.js

const API_URL = process.env.URL_API;
//Url for getting all pizzas
export const ALL_PIZZAS_API_URL = `${API_URL}pizzas`

Now, I am trying to deploy it to vercel. So I changed my URL_API to '/api/' which isn't working. I even tried changing it to 'api' or '/api' or 'api/' without any success. Whole of my applications stop working. I have to type whole of the address with localhost:3000/api/pizzas to make it work or else whole app breaks even on local server.

How do I change it so I can make it production ready? Again here is my github: - https://github.com/ajaybirbal/nextjs-pizzaapp

I am getting this error on vercel console: -

> Build error occurred
TypeError: Cannot read property 'map' of null
    at getStaticPaths (/vercel/path0/.next/server/pages/pizza/[id].js:146:26)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:498:31)
    at async /vercel/path0/node_modules/next/dist/build/utils.js:641:119
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:75:20) {
  type: 'TypeError'
}

It is line 61 of this: - https://github.com/ajaybirbal/nextjs-pizzaapp/blob/main/pages/pizza/%5Bid%5D.js

So map is not getting json data.

I tried changing env variables on vercel like this: - https://nextjs-pizzaapp.vercel.app/api/

I found the domain on settings->Domains. Also, its showing Failed to Assign

killerprince182
  • 455
  • 2
  • 12
  • Is your production server *really* `http://localhost:3000`? – Quentin Jan 24 '22 at 09:12
  • No, I tried changing the env variable there too with the local domain. Build failed because map didn't found the pizzas object i.e. it failed to get json data. – killerprince182 Jan 24 '22 at 09:17
  • 1
    "api" is reserved for https://nextjs.org/docs/api-routes/introduction – Yilmaz Jan 24 '22 at 09:22
  • 1
    Does this answer your question: [Fetch error when building Next.js static website in production](https://stackoverflow.com/a/66206394/1870780)? The issue is not related to env vars, the error occurs during build time when your app tries to access the API routes that aren't available yet. You should not call API routes in `getStaticProps`/`getStaticPaths`. Instead, directly import the logic used inside your API route. – juliomalves Jan 24 '22 at 19:21

0 Answers0