はじめに

Next.jsでMUIを使って画面を作っていたときに、Hydration Errorが発生しました。

最初はエラー内容を見ても全く意味が分からず、「use client」を付けると直るという記事を見つけましたが、「なぜ直るのか」が理解できませんでした。

今回は、自分なりに調べて理解した内容を初心者向けにまとめます。

発生したエラー

コンポーネントを表示すると、次のようなHydration Errorが表示されました。

Hydration failed because the initial UI does not match what was rendered on the server.

Next.jsでは、デフォルトでServer Componentとして動作します。

Server Componentでは、

を使用できません。

一方、MUIのButtonやTextFieldなどは内部でクライアント側の機能を利用しているため、Server Componentのままだとエラーになる場合があります。

"use client";

import Button from "@mui/material/Button";

export default function Sample() {
  return <Button>送信</Button>;
}

最初は「use clientを書けば直る」とだけ覚えていました。

しかし調べてみると、

というNext.jsの仕組みを理解することが重要だと分かりました。

今後は「とりあえず付ける」のではなく、「なぜ必要なのか」を意識して実装したいと思います。