Rechart を Next.js で使うと「Warning: Prop id did not match. Server:」 が発生

結論

回避する一つの方法は、コンポーネントをサーバーレンダリングしないことです。

default export で Rechart のコンポーネントを使用している場合

const MyChart = () => {
  return (
    <BarChart data={data}>
      <XAxis type="number" />
      <YAxis dataKey="name" />
      <Bar dataKey="name" stackId="hogeId" fill={"red"} />
    </BarChart>
  );
};
export default MyChart;

import dynamic from "next/dynamic";
const DynamicMyChart = dynamic(() => import("./MyChart"), { ssr: false });

named export の場合

export const MyChart = () => {
  return (
    <BarChart data={data}>
      <XAxis type="number" />
      <YAxis dataKey="name" />
      <Bar dataKey="name" stackId="hogeId" fill={"red"} />
    </BarChart>
  );
};

import dynamic from "next/dynamic";

const DynamicMyChart = dynamic<Record<string, unknown>>(
  () => import("./MyChart").then((module) => module.MyChart),
  { ssr: false }
);

解説

「Warning: Prop id did not match. Server:」

これは Next.js の一般的な警告です。
クライアントの DOM とサーバーでレンダリングされた DOM が正確に一致しない場合に発生します。この場合、recharts の ID がクライアント側で異なるために表示されます。

dynamic import を利用すると非同期で import 処理ができます。

dynamic メソッドの SSR 回避のオプションを付与することでこのエラーを回避しています。SSR 回避とは、通常はサーバサイドで実行される制御をクライアントサイドで処理させてしまうことです。

余談 dynamic の他の使い方など

ローダーとパフォーマンス改善に使える

ダイナミックコンポーネントのロード中にローディング状態をレンダリングすることができます。
また動的にインポートすることで初回レンダリングの量を削減し、ページロードの読み込み時間を削減することができます。

const DynamicMyChart = dynamic<Record<string, unknown>>(
  () => import("./MyChart").then((module) => module.MyChart),
  { ssr: false, loading: () => <p>Loading...</p> }
);

Github の Issue：
Prop id did not match between server and client

Next.js 公式サイト：
Dynamic Import