[Next.js]ビルドしたサイトにアクセスすると「Application error: a client-side exception has occurred (see the browser console for more information).」のエラーが出てしまう

next buildコマンドなどでビルドしたものにアクセスすると、以下のようなエラーが出てしまうことがあります。

エラー内容

Application error: a client-side exception has occurred (see the browser console for more information).

エラー画面

原因

このエラーは、ビルドしたサイトにアクセスした際に、クライアント側でエラーが発生したことを示しています。このエラーが発生する原因は、ビルドしたサイトに含まれるJavaScriptファイルの中にエラーがあるためです。

解決方法

このエラーが発生した場合は、以下のような対応を行ってください。

1. エラーが発生しているJavaScriptファイルを特定する
2. エラーが発生しているJavaScriptファイルを修正する

エラーが発生しているJavaScriptファイルを特定する

エラーが発生しているJavaScriptファイルを特定するには、以下の手順を行ってください。

1. Google Chromeを起動する
2. ビルドしたサイトにアクセスする
3. エラー画面が表示されたら、画面の右上にある「…」をクリックする
4. 「More tools」→「Developer tools」をクリックする
5. デベロッパーツールが表示されたら、画面の右上にある「Console」をクリックする
6. エラーが発生しているJavaScriptファイルを特定する
7. エラーが発生しているJavaScriptファイルを修正する

ちなみに私はAPIでデータを取得する箇所で不正なデータが返ってきていたため、エラーが発生していました。

エラーが発生した箇所の例

"use client" // クライアント側で行なっている処理が原因のことが多い
import { useState } from "react";
export default function Component() {
    const data = require("../cache/data.json"); 
    data.forEach((i,post) => { // データが不正なためエラーが発生
      index.add(i, post);
    });    
    :
    （省略）
    :
}

問題箇所を修正して再度ビルドすると、エラーが発生しなくなりました。

コメント