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

Transcript

1. Next.jsで静的サイトを作成時
   よく使っているライブラリまとめ
   2022/02/22 by hanetsuki
   in ジャムジャム！！Jamstack_5
   

   View Slide

2. hanetsuki
   ● 中野にあるweb開発会社”ちょっと株式会社”所属
   ● 業界歴4年目のフロントエンドエンジニア
   ● デザインと開発とオタクコンテンツが好き
   自己紹介
   

   View Slide

3. 突然ですが、静的サイトを作る時、

   何かフレームワーク使ってますか？

   

   View Slide

4. ● vanillaJS
   ● jQuery
   ● Next.js
   ● GatsbyJS
   ● Nuxt.js
   ● VuePress
   ...etc
   

   View Slide

5. 私がよく使っているのは。

   

   View Slide

6. ● vanillaJS
   ● jQuery
   ● Next.js
   ● GatsbyJS
   ● Nuxt.js
   ● VuePress
   ...etc
   React系のフレームワーク
   

   View Slide

7. ● vanillaJS
   ● jQuery
   ● Next.js
   ● GatsbyJS
   ● Nuxt.js
   ● VuePress
   ...etc
   今回はその中でもNext.jsの
   お話し
   

   View Slide

8. 本編

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

   

   View Slide

9. ● next-seo
   ○ https://github.com/garmeeh/next-seo
   ○ Seoコンポーネントのようなものが踏襲されている。
   ○ JSON-LDのサポートも入っていてサポート範囲が広い。
   ● next-sitemap
   ○ https://github.com/iamvishnusankar/next-sitemap
   ○ sitemap.xmlとrobots.txtを作成してくれる。
   ○ 分割もしてくれる。
   ○ configファイルの中で細かい設定ができる。
   SEO関連
   

   View Slide

10. ● aspida
    ○ https://github.com/aspida/aspida
    ○ API数が多い案件ではapiクライアントとして利用
    ○ Aspida + microcms-js-sdkを使った型安全なAPI開発 | microCMSブログ
    ● microcms-js-sdk
    ○ https://github.com/microcmsio/microcms-js-sdk
    ○ 最近扱っている案件のheadlessCMSがほぼmicroCMSなので御用達
    headlessCMS関連
    

    View Slide

11. ● react-scroll
    ○ https://github.com/fisshy/react-scroll
    ○ ページ内のスムーススクロールリンクなどに有効
    ● pathpida
    ○ https://github.com/aspida/pathpida
    ○ 再生したページのパスの定数ファイルを作ってくれる便利なやつ。
    ○ タイポが無くなって助かる。
    その他おすすめのライブラリ - 1/4
    

    View Slide

12. ● micromodal.js
    ○ https://github.com/ghosh/Micromodal
    ○ a11y対応されている軽量モーダルライブラリ
    ○ コンポーネントでの提供は今のところないので組み込みが必要
    ○ Micromodal.jsをカスタムHookで仕立てる | Zenn
    その他おすすめのライブラリ - 2/4
    ● react-share
    ○ https://github.com/nygardk/react-share
    ○ ブログやニュースなどのコンテンツを
    SNSにシェアしたい時などに重宝している。
    ○ デフォルトのアイコンなどもライブラリ内にあるのでサクッとシェア機能が作れる。
    

    View Slide

13. ● typed-scss-modules
    ○ https://github.com/skovy/typed-scss-modules
    ○ CSS Modlesでスタイリングをする際に、.module.(sc|c)ss に対して型定義ファイルを作
    成してくれる。
    ○ 宣言漏れや補完など、痒い所に手が届く
    その他おすすめのライブラリ - 3/4
    ● swiper
    ○ https://github.com/nolimits4web/swiper
    ○ カルーセル機能を使うならこれ！と感じるほど御用達
    ○ css変数でカスタマイズも容易なのでどくじ
    UIにも合わせやすい
    ○ Reactコンポーネント化されているので扱いやすい
    

    View Slide

14. その他おすすめのライブラリ - 4/4
    ● clsx
    ○ https://github.com/lukeed/clsx
    ○ 228Bと軽量
    ○ classnamesにできることはできる
    ○ MUIで利用されてるのはclsx
    

    View Slide

15. ご静聴ありがとうございました。
    

    View Slide