Next.jsでFullCalenderを使おうとしたときの備忘

Next.JSでFullCalenderを利用しようとしたところうまくモジュールが読み込めなかったので
解決までの内容を備忘メモしておく。

モジュールのインポート

Fullcalenderのインストールについて
https://fullcalendar.io/docs/react
以下の3つのモジュールをインストールする

npm install @fullcalendar/core
npm install @fullcalendar/react
npm install @fullcalendar/daygrid

トランスパイルの設定(next.config.js)

別の記事を参考にさせていただいた時に、node_module配下のcss読み込みでエラーが発生するため「next-transpile-modules」をインストールしてnext.config.jsの設定が必要とありましたが、Next13.1以降はネイティブに追加され「transpilePackages」を使えばよいとのことだったのでその内容を追加。

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: [
    '@fullcalendar/common',
    '@fullcalendar/daygrid',
    '@fullcalendar/react',
    '@fullcalendar/resource',
    '@fullcalendar/resource-timeline',
  ],
};

module.exports = nextConfig;

デモソースの実行

'use client';
import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
export const CalendaerPage = () => {
  /**
   * 今日の日付を取得
   * 今月の1日目
   * 今月の最終日を取得
   *
   *
   *
   */
  return <FullCalendar plugins={[dayGridPlugin]} initialView="dayGridMonth" />;
};

表示できたことを確認