Question 198051 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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

enter image description here

dynamic page

enter image description here

vercel Outcome

Front page vercel

enter image description here

dynamic page in vercel (error)

enter image description here

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    …Try full dynamic page with adding export const dynamic = 'force-dynamic'; to the ..location/[city] /page.js ( and basically remove next: {revalidate: 10000} from fetches) — maybe issues’re caused by inconsistencies btw server-prerendered (which should be the default city?) and dynamically rendered on the fly [city] pages …
    (also, why not to set title=${cityreport.city.name} Weather – Next Weather Apptometadata` object itself (as by docs) …

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search