Next.js で FullCalendar を使う

Next.js 11.1 で FullCalendar v5.9 を使う手順

Next.jsでFullcalendarパッケージを使うための最新記事が古くなっているため、2021年10月7日時点での最新バージョンのNext.js(v11.1.2)でFullcalendar(v5.9.0)を導入するための手順を残します。
https://fullcalendar.io/

Fullcalendar パッケージの追加

yarn add @fullcalendar/react @fullcalendar/daygrid

今回はコア(React用)の部分と、daygrid(見た目カレンダーのもの)を追加します。

import 文とタグの挿入

インポートしたいファイル

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'

<FullCalendar
 plugins={[dayGridPlugin]}
 locale="ja"
 initialEvents={[{ title: 'initial event', start: new Date() }]}
/>

カレンダーを表示したいファイルにimportとタグを挿入します。
importはcoreが上になるように並べてください。
localeは日本語表示、initialEventsは初期表示用の暫定データを今日の日時で入れています。

コンパイル（エラーが表示される）

yarn devを実行してください。

yarn dev
error - ./node_modules/@fullcalendar/common/main.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@fullcalendar/common/main.js

パッケージの内部でグローバルcssをインポートするとNext.jsではエラーとなります。
https://github.com/vercel/next.js/blob/master/errors/css-npm.md
https://nextjs.org/docs/messages/css-npm
エラーの対応をするので一旦yarn devを停止(Control+C)しておきます。

next-transpile-modules パッケージの追加

yarn add next-transpile-modules

参考記事では、v4.1をインストールしていますが、Next.js(v11.1)では、最新のバージョン8.0をインストールすればOKです。

next.config.js の修正

next.config.js

const withTM = require('next-transpile-modules')([
  '@fullcalendar/common',
  '@fullcalendar/daygrid',
  '@fullcalendar/react',
])

module.exports = withTM({
  // any other next.js settings here
})

next-transpile-modulesを使って、fullcalendarのプラグインをトランスパイル対象にします。
next.config.jsには大体何か書いてあると思いますのでその下に追記します。

babel-plugin-transform-require-ignore の追加は不要

これまでの解説にあったnode_modules内のファイルから.cssインポート部分を削除する対応が不要になっています。最初この部分が動かなくて試行錯誤していましたがまさか不要とは…。

再コンパイル

yarn dev を再実行してください。

yarn dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - automatically enabled Fast Refresh for 1 custom loader
event - compiled successfully

表示確認

Fullcalendarが表示されました。
あとはカスタマイズ方法を検索しながら進めていけばOKです。

あれ？

グローバルCSSをインポートする部分がなくても動いてしまいました…。
（もう）インポートしなくてもいいのかどうか確認中です。

_app.js

import '@fullcalendar/common/main.css'
import '@fullcalendar/daygrid/main.css'

ちなみに現在はインポート先は_app.jsでなくてもOKです。

知りたいこと

トランスパイルが何をしているのかもう少しちゃんと知りたい。
カレンダーカスタマイズ用のCSSをどう書いておくとスッキリするか。
このプラグインの作者さんがNext上でプラグインからのCSSの取り回しについて熱い訴えをしていたみたいだけど結局どうなったのか。Next側にもそれなりの理由はある感じするんだけども。

参考記事

https://qiita.com/yk2220s/items/8ed4d781412f6c4e9c45
https://github.com/yk2220s/next-fullcalendar-example
https://stackoverflow.com/questions/66750199/fullcalendar-nextjs-dynamic-import-doesnt-show-calendar