【Next】FullCalendarをNext.jsで使うまでのメモ

Next.js へ FullCalendarを導入した時のメモです。

環境

• PC: MacBook Pro (Intel Core 2016)
• OS: macOS Montery12.3.1
• Node.js v16.10.0
• Next.js v11.1.3
• React.js v17.0.2
• FullCalendar v^5.10.1
• next-transpile-modules v^9.0.0

ドキュメント

install

npm i @fullcalendar/react @fullcalendar/daygrid @fullcalendar/core
もしくは
yarn install @fullcalendar/react @fullcalendar/daygrid @fullcalendar/core

componentの作成

pages/hoge.tsx

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";

export default function Hoge() {
  return (
    <div>
      <FullCalendar
        plugins={[dayGridPlugin]}
        initialEvents={[{ title: "initial event", start: new Date() }]}
      />
    </div>
  );
}

エラー

今の状態でページへアクセスすると、エラーが出ます。

(node:44083) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
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
Could not find files for /hoge in .next/build-manifest.json
Could not find files for /hoge in .next/build-manifest.json

Next.js では node_modules 配下にあるグローバルCSSが読み込まれないため仕様のため、
next-transpile-modules をインストールして next.config.js で設定します。

next-transpile-modulesとは

• node_modules 内の指定パッケージを、ビルド時にトランスパイルするためのプラグイン
• トランスパイルされたパッケージに含まれるCSSをトランスパイルするために使用
  • つまり、内部のパッケージnode_modulesにCSS/SCSSファイルを含めることができる
• モジュールによってはトランスパイルしないとIEで動かないものもあり、そうったものを対象に指定して使用する

next-transpile-modulesをインストール

npm i next-transpile-modules
もしくは
yarn add next-transpile-modules

next.config.jsの修正

next-transpile-modulesを使って、fullcalendarのプラグインをトランスパイル対象にします。

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

/** @type {import('next').NextConfig} */
module.exports = withTM({
  // any other next.js settings here
});

localを日本語表示設定にする

続いては、日本語表示できるようにします。

先程のcomponentのコードに、@fullcalendar/core を import して FullCalendar component の locale へ渡してあげるだけです。

以下、componentの最終形です。

pages/hoge.tsx

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import jaLocale from '@fullcalendar/core/locales/ja';

export default function Hoge() {
  return (
    <div>
      <FullCalendar
        plugins={[dayGridPlugin]}
        locale={jaLocale}
        initialEvents={[{ title: 'initial event', start: new Date() }]}
      />
    </div>
  );
}

表示確認

先程のPATHへアクセスすると無事表示されました。

文献