🍔
Next.jsで静的サイトを作成する際によく使っているライブラリまとめ
この記事は、先日催された「ジャムジャム！！Jamstack_5」で登壇した際の内容を再度まとめたものとなります
Next関連
next-seo
- Seoコンポーネントのようなものが踏襲されてる
- JSON-LDのサポートも入っていてサポート範囲が広い
next-sitemap
- sitemap.xmlとrobots.txtを作成してくれる
- 分割もしてくれる
- configファイルの中で細かい設定ができる
pathpida
- 再生したページのパスの定数ファイルを作ってくれる便利なやつ
- タイポが無くなって助かる
typed-scss-modules
- CSS Modlesでスタイリングをする際に、
.module.(sc|c)ssに対して型定義ファイルを作成してくれる。 - 宣言漏れや補完など、痒い所に手が届く
headlessCMS関連
microcms-js-sdk
- 最近扱っている案件のheadlessCMSがほぼmicroCMSなので御用達
aspida
- API数が多い案件ではapiクライアントとして利用
microCMSさんのブログにて紹介されているので合わせてご覧ください
React関連
react-share
- ブログやニュースなどのコンテンツをSNSにシェアしたい時などに重宝している
- デフォルトのアイコンなどもライブラリ内にあるのでサクッとシェア機能が作れる
react-scroll
- ページ内のスムーススクロールリンクなどに有効
clsx
- 228Bと軽量
- classnamesにできることはできる
- MUI内部で利用されてるのはclsx
JavaScript関連
micromodal.js
- a11y対応されている軽量モーダルライブラリ
- コンポーネントでの提供は今のところないので組み込みが必要
Reactに組み込む際の事例を記事にしてありますので、合わせてご覧ください
swiper
- カルーセル機能を使うならこれ！と感じるほど御用達
- css変数でカスタマイズも容易なのでどくじUIにも合わせやすい
- Reactコンポーネント化されているので扱いやすい
Discussion