📊

Next.jsでRechartsを使うと ConsoleにWarningが出る

2022/10/24に公開

Next.js

Recharts

tech

Rechartsとは

React向けのグラフライブラリ
https://recharts.org/en-US/

各種バージョン

"next": "12.1.0",
"react": "17.0.2",
"recharts": "2.1.15",

導入

公式記載の方法に沿って進める。

警告が表示される

Warning: Prop `id` did not match. Server: "recharts16-clip" Client: "recharts1-clip".

サーバーとクライアントでidが異なると言われる。idの名前は記述などによって数字の部分が変化した。

現時点での対処方法

同様の問題のisuueがあるので確認すると、Next.jsではdynamic importを使用すると回避できるとのこと。

Next.js DynamicImport のDocsはこちら。

ちなみに、idを記述するだけでは他のエラーとなってしまう。これについては以下のissueにもある。

サンプル

表示用のデータを引数として渡したりする部分で若干手間取ったのでサンプルを置いておきます。
グラフ部分の記述はnamed exportで実装している想定です。

// 呼び出し元の実装
import dynamic from 'next/dynamic'
import { Chart } from 'component/Chart' //グラフの実装は通常通りに

export const Example = () => {
  return (
    <div>
      <MyChart />
    </div>
  )
}

//表示用の何かしらのデータ
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...]

type TProps = {
  data: { 略 }
}

const MyChartImpoet = dynamic<TProps>(
  () =>
    import('component/Chart').then((mod) => mod.Chart),
  { ssr: false }
)

function MyChart({ data }: TProps) {
  return <MyChartImpoet data={data} />
}