Application error: a client-side exception has occurred(IN NEXT,JS 13)

Question

Introduction:

I'm currently working on a Weather Application. I build this Application with the help of Next.js 13 after completing the project i build the project with the help of yarn run build in my local machine it is working fine but when i deploy this project on vercel it's home page is working but my dynamic routes are not working

gitHub : code Link

local system Outcome:

Front page

dynamic page

vercel Outcome

Front page vercel

dynamic page in vercel (error)

Answer 1

It's impossible to be sure what gone wrong without the logs from Vercel, but at the very least - your getCityId uses localhost to get data:

const getcityid = async (id) => {
    const city = await fetch(`http://localhost:3000/api/citibyid?id=${id}`)
    const citydata = await city.json();
    return citydata
}

You need to use relative path, like:

const city = await fetch(`/api/citibyid?id=${id}`)

Also make sure that environment variable API_KEY for openweathermap is set on Vercel.