🍔

Next.jsで静的サイトを作成する際によく使っているライブラリまとめ

2022/02/24に公開約1,600字

この記事は、先日催された「ジャムジャム!!Jamstack_5」で登壇した際の内容を再度まとめたものとなります

Next関連

next-seo

https://github.com/garmeeh/next-seo
  • Seoコンポーネントのようなものが踏襲されてる
  • JSON-LDのサポートも入っていてサポート範囲が広い

next-sitemap

https://github.com/iamvishnusankar/next-sitemap
  • sitemap.xmlとrobots.txtを作成してくれる
  • 分割もしてくれる
  • configファイルの中で細かい設定ができる

pathpida

https://github.com/aspida/pathpida
  • 再生したページのパスの定数ファイルを作ってくれる便利なやつ
  • タイポが無くなって助かる

typed-scss-modules

https://github.com/skovy/typed-scss-modules
  • CSS Modlesでスタイリングをする際に、.module.(sc|c)ssに対して型定義ファイルを作成してくれる。
  • 宣言漏れや補完など、痒い所に手が届く

headlessCMS関連

microcms-js-sdk

https://github.com/microcmsio/microcms-js-sdk
  • 最近扱っている案件のheadlessCMSがほぼmicroCMSなので御用達

aspida

https://github.com/aspida/aspida
  • API数が多い案件ではapiクライアントとして利用

microCMSさんのブログにて紹介されているので合わせてご覧ください

https://blog.microcms.io/how-to-use-aspida/

React関連

react-share

https://github.com/nygardk/react-share
  • ブログやニュースなどのコンテンツをSNSにシェアしたい時などに重宝している
  • デフォルトのアイコンなどもライブラリ内にあるのでサクッとシェア機能が作れる

react-scroll

https://github.com/fisshy/react-scroll
  • ページ内のスムーススクロールリンクなどに有効

clsx

https://github.com/lukeed/clsx
  • 228Bと軽量
  • classnamesにできることはできる
  • MUI内部で利用されてるのはclsx

JavaScript関連

micromodal.js

https://github.com/ghosh/Micromodal
  • a11y対応されている軽量モーダルライブラリ
  • コンポーネントでの提供は今のところないので組み込みが必要

Reactに組み込む際の事例を記事にしてありますので、合わせてご覧ください

https://zenn.dev/rabbit/articles/6017bd87550971

swiper

https://github.com/nolimits4web/swiper
  • カルーセル機能を使うならこれ!と感じるほど御用達
  • css変数でカスタマイズも容易なのでどくじUIにも合わせやすい
  • Reactコンポーネント化されているので扱いやすい

Discussion

ログインするとコメントできます