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
ソフトウェア開発ナニモワカラナイ
hanetsuki
0
160
検証も兼ねて個人開発で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
390
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
12k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.5k
Other Decks in Technology
See All in Technology
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
3
11k
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
320
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
6
4k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
190
PO初心者が考えた ”POらしさ”
nb_rady
0
190
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
140
Operating Operator
shhnjk
0
410
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
190
怖くない!はじめてのClaude Code
shinya337
0
360
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
2
570
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Balancing Empowerment & Direction
lara
1
410
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Become a Pro
speakerdeck
PRO
28
5.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
250
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Music & Morning Musume
bryan
46
6.6k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
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
ご静聴ありがとうございました。