Application error: a server-side exception has occurred (see the server logs for more information).エラーでページが表示されない

はじめに

next.jsをfirebaseにデプロイしようとした際に、ページが表示されず悩んだので解決策を載せておきます。

事象

next.jsをfirebaseにデプロイしました。
firebase deployでデプロイを行い、特にエラーも表示されなかったためページを見に行ったらこのような画面が表示されていました。

原因

APIをfetchする処理をこのように入れているのですが、envで指定しているNEXT_PUBLIC_API_URLがhttp://localhost:3000となっているためでした。
実際のfirebaseでhostingしているURLは別なのでローカルのものを指定しても動きません。

const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/qiita`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ page: 4 }),
});

解決策

NEXT_PUBLIC_API_URLを実際のURLを指定するように書き換えました。

NEXT_PUBLIC_API_URL="実際のURL"

おわりに

ローカルでは動くのに、デプロイしたURLでページがみれないときはAPIが正しいURLとなっているか調べて見るとよさそうです。