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
18k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
February 22, 2022
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
AIを用いて実践してきた開発方法について
hanetsuki
1
45
ソフトウェア開発ナニモワカラナイ
hanetsuki
0
170
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
2k
Next.jsの今年一年を振り返る
hanetsuki
1
1.4k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
4
3.2k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
3
2.3k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
400
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
12k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.5k
Other Decks in Technology
See All in Technology
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
5
1.4k
モダンフロントエンド 開発研修
recruitengineers
PRO
2
250
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
19
4.9k
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
180
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
.NET開発者のためのAzureの概要
tomokusaba
0
230
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
430
第4回 関東Kaggler会 [Training LLMs with Limited VRAM]
tascj
12
1.7k
夢の印税生活 / Life on Royalties
tmtms
0
280
広島発!スタートアップ開発の裏側
tsankyo
0
240
ECS モニタリング手法大整理
yendoooo
1
120
Goでマークダウンの独自記法を実装する
lag129
0
210
Featured
See All Featured
Side Projects
sachag
455
43k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Rails Girls Zürich Keynote
gr2m
95
14k
Done Done
chrislema
185
16k
The Invisible Side of Design
smashingmag
301
51k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
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
ご静聴ありがとうございました。