Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
February 22, 2022
Technology
5
10k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
February 22, 2022
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
2.2k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
2.9k
Other Decks in Technology
See All in Technology
ウォーターフォールとアジャイルと楽楽明細/Waterfall×Agile×Rakurakumeisai
whitefox_73
1
340
トランザクションスクリプトは何がダメなのか?
polidog
2
1.2k
音のような言葉 〜ちゃちゃっとチャットで楽しむちょっとしたコツ〜 / words like sounds
satoryu
1
1.3k
2022年度新卒技術研修「DNS」講義
excitejp
PRO
0
330
Microsoft Build 2022 Recap Party!! Azure のデータ & 分析サービス 注目アップデート / microsoft-build-2022-recap-azure-data-and-analytics
nakazax
0
230
データチームの境界を考える
yummydum
0
170
公式版Scratchやtoio DoでIoT(ブラウザ上でのJavaScript実行で) / ビジュアルプログラミングIoTLT vol.11
you
0
150
1人目QA奮闘記/QA Engineer's Struggle
mii3king
2
1k
SI企業が「アジャイル推し」になったら 幸せになれますか?/Can SI company be happy if it becomes “Agile stan” ?
chinmo
1
1k
Istio入門
nutslove
15
4.8k
データエンジニアと作るデータ文化
yuki_saito
1
450
LINEのB2Bプラットフォームにおけるトラブルシューティング2選
line_developers
PRO
3
280
Featured
See All Featured
Side Projects
sachag
450
37k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
Ruby is Unlike a Banana
tanoku
91
9.2k
Scaling GitHub
holman
451
140k
Typedesign – Prime Four
hannesfritz
33
1.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Visualization
eitanlees
124
11k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Statistics for Hackers
jakevdp
781
210k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
500
Transcript
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ 2022/02/22 by hanetsuki in ジャムジャム!!Jamstack_5
hanetsuki • 中野にあるweb開発会社”ちょっと株式会社”所属 • 業界歴4年目のフロントエンドエンジニア • デザインと開発とオタクコンテンツが好き 自己紹介
突然ですが、静的サイトを作る時、 何かフレームワーク使ってますか?
• vanillaJS • jQuery • Next.js • GatsbyJS • Nuxt.js
• VuePress ...etc
私がよく使っているのは。
• vanillaJS • jQuery • Next.js • GatsbyJS • Nuxt.js
• VuePress ...etc React系のフレームワーク
• vanillaJS • jQuery • Next.js • GatsbyJS • Nuxt.js
• VuePress ...etc 今回はその中でもNext.jsの お話し
本編 Next.jsで静的サイトを作成時によく使ってるライブ ラリまとめ
• 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関連
• 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関連
• react-scroll ◦ https://github.com/fisshy/react-scroll ◦ ページ内のスムーススクロールリンクなどに有効 • pathpida ◦ https://github.com/aspida/pathpida
◦ 再生したページのパスの定数ファイルを作ってくれる便利なやつ。 ◦ タイポが無くなって助かる。 その他おすすめのライブラリ - 1/4
• micromodal.js ◦ https://github.com/ghosh/Micromodal ◦ a11y対応されている軽量モーダルライブラリ ◦ コンポーネントでの提供は今のところないので組み込みが必要 ◦ Micromodal.jsをカスタムHookで仕立てる
| Zenn その他おすすめのライブラリ - 2/4 • react-share ◦ https://github.com/nygardk/react-share ◦ ブログやニュースなどのコンテンツを SNSにシェアしたい時などに重宝している。 ◦ デフォルトのアイコンなどもライブラリ内にあるのでサクッとシェア機能が作れる。
• 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コンポーネント化されているので扱いやすい
その他おすすめのライブラリ - 4/4 • clsx ◦ https://github.com/lukeed/clsx ◦ 228Bと軽量 ◦
classnamesにできることはできる ◦ MUIで利用されてるのはclsx
ご静聴ありがとうございました。