Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
Search
hanetsuki
February 22, 2022
Technology
5
17k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
February 22, 2022
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.4k
Next.jsの今年一年を振り返る
hanetsuki
1
1.3k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
3
2.6k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
3
2.1k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
310
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
11k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.1k
Other Decks in Technology
See All in Technology
YJIT Makes Rails 1.7x faster / RubyKaigi 2024
k0kubun
4
570
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
12
3.3k
20240509 CloudWatch でいろいろなものを監視してみよう
masaruogura
1
120
AWS CLIの起動が重くてつらいので aws-sdk-client-go を書いた / kamakura.go#6
fujiwara3
6
3.4k
回り回って効いてくる副次的効果としての技術広報/techpr
nishiuma
2
210
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
390
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
2
350
マルチテナントマルチクラスタKubernetesでもUXを損なわない認証認可の勘所
pfn
PRO
0
110
TiDBにおけるテーブル設計と最適化の事例
cygames
0
810
【TSkaigi】2024/05/11 当日スライド
kimitashoichi
14
4.1k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
38k
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
910
Featured
See All Featured
The Language of Interfaces
destraynor
151
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
How STYLIGHT went responsive
nonsquared
92
4.9k
Statistics for Hackers
jakevdp
790
220k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Documentation Writing (for coders)
carmenintech
60
4k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
22
1.6k
What's in a price? How to price your products and services
michaelherold
238
11k
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
ご静聴ありがとうございました。