$30 off During Our Annual Pro Sale. View Details »

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

hanetsuki
February 22, 2022

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

hanetsuki

February 22, 2022
Tweet

More Decks by hanetsuki

Other Decks in Technology

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