【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

# ドキュメント
https://fullcalendar.io/docs/react

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

# componentの作成
```tsx: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
```

![Screen Shot 2022-04-05 at 11.05.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/4e1e86e2-1752-b6be-0d62-499a0ca73ad5.png)

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

https://nextjs.org/docs/messages/css-npm

# 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のプラグインをトランスパイル対象にします。

```javascript
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の最終形です。

```tsx: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へアクセスすると無事表示されました。

![Screen Shot 2022-04-05 at 22.12.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/dd218c46-bc82-d7ac-195f-05868ee4799d.png)

# 文献
https://spacebro.io/articles/fullcalendar-nextjs-10-higher

https://stackoverflow.com/questions/66750199/fullcalendar-nextjs-dynamic-import-doesnt-show-calendar

https://zenn.dev/aiji42/articles/1de8f9ea7b8a10#2.-next-transpile-modules-(%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%83%91%E3%82%A4%E3%83%AB)

https://stackoverflow.com/questions/69047920/change-the-language-of-the-fullcalendar-react-component