fullcalendar

Next.jsでfullcalendarをつかうと、

Warning: Prop `id` did not match. Server: "fc-dom-16" Client: "fc-dom-2"

上記のようなWarningが出ます。
直訳すると、クライアントとサーバーのidがあっていないようですね。

Next.jsはSSR前提で動いているので、こういったことが起こる可能性があります。

こんな時は、Dynamic Importが役に立ちます。

import Calendar from "./Calendar";

↓

const Calendar = dynamic(() => import("./Calendar"), {
  ssr: false,
});

Calendarコンポーネントのimportを上記のように書き換えます。

Dynamic Importの書き方に{ssr: false}というオプションを渡してあげるだけで、「このファイルはSSRしない」とNextが判断するので、エラー回避することができます。

SSRエラーの例

もっとわかりやすくすると、サーバー側で、ブラウザの機能は使えません。

import React from "react";

const Test = () => {
  window.location.reload();
  return <div>Test</div>;
};

export default Test;

例えばこのようなコンポーネントを使おうとすると、

Server Error
ReferenceError: window is not defined

windowオブジェクトはクライアント側のjavaScriptが提供しているものです。

カレンダーと同じようにimportの方法を変えてやります。

import Test from "./Test";

↓

const Test = dynamic(() => import("./Test"), {
  ssr: false,
});

これでクライアントサイドレンダリングになり、無事windowオブジェクトは使用できます。