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
54
ソフトウェア開発ナニモワカラナイ
hanetsuki
0
180
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
2.1k
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.6k
Other Decks in Technology
See All in Technology
Pure Goで体験するWasmの未来
askua
1
180
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
massyuu
1
270
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
140
about #74462 go/token#FileSet
tomtwinkle
1
350
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
140
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
180
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.5k
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
0
110
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
BtoBプロダクト開発の深層
16bitidol
0
330
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Done Done
chrislema
185
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building an army of robots
kneath
306
46k
4 Signs Your Business is Dying
shpigford
185
22k
Navigating Team Friction
lara
189
15k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Speed Design
sergeychernyshev
32
1.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.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
ご静聴ありがとうございました。