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)を導入するための手順を残します。
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ではエラーとなります。 エラーの対応をするので一旦yarn devを停止(Control+C)しておきます。
next-transpile-modules パッケージの追加
yarn add next-transpile-modules
参考記事では、v4.1をインストールしていますが、Next.js(v11.1)では、最新のバージョン8.0をインストールすればOKです。
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をインポートする部分がなくても動いてしまいました…。
（もう）インポートしなくてもいいのかどうか確認中です。
import '@fullcalendar/common/main.css'
import '@fullcalendar/daygrid/main.css'
ちなみに現在はインポート先は_app.jsでなくてもOKです。
知りたいこと
トランスパイルが何をしているのかもう少しちゃんと知りたい。
カレンダーカスタマイズ用のCSSをどう書いておくとスッキリするか。
このプラグインの作者さんがNext上でプラグインからのCSSの取り回しについて熱い訴えをしていたみたいだけど結局どうなったのか。Next側にもそれなりの理由はある感じするんだけども。
参考記事
Discussion
ver.6 からCSSを _app.js から組み込めるようになるっぽいですね。
とは言えめんどくせーのでNext.js側で何とかしてよって感じっぽいですが。
next-transpile-modules が Next13.1 に取り込まれたっぽいので13.1に上げたらこの移行手順で動くかテストしたい
Next.js 13.4 にアップデート後、無事 next-transpile-modules を外せました。