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
December 03, 2022
Technology
4
2.1k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
https://conf2022.pwanight.jp/
で登壇したスライドです。
hanetsuki
December 03, 2022
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.6k
Next.jsの今年一年を振り返る
hanetsuki
1
1.3k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
3
2.7k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
320
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
11k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
17k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.2k
Other Decks in Technology
See All in Technology
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
720
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
MySQLのロックの種類とその競合
yoku0825
6
1.6k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Web development in the modern age
philhawksworth
203
10k
Building Your Own Lightsaber
phodgson
101
5.9k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Agile that works and the tools we love
rasmusluckow
325
20k
Thoughts on Productivity
jonyablonski
64
4.1k
BBQ
matthewcrist
82
9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Code Review Best Practice
trishagee
58
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Transcript
None
None
None
None
みなさんは、 使ってますか?
ってなんだっけ?
Next.jsは、React をベースに開発されたオープンソースの JavaScriptフ レームワークです。 Webフロントエンドライブラリである React の機能性を保ちつつ、React より も実用性が向上しました。 パフォーマンスやSEO、アプリを効率的に開発できる機能が組み込まれてい
るため、機能の実装コストを抑えた開発ができます。 「SSG・ISR・SSR」「next/image」「next/link」「API Routes」 ってなんだっけ?
のメリットを活かしたい! この想いから以下の3つを主な課題として開発を進めました。 SSG・ISR・SSRを有効的に活用する“使いどころ”は? どのようなパッケージを使えば効果的か? ホスティング先によってどのような違いがあるのか?
本格的にJamstackでのサービス開発に携わっ た約1年間で得たポイントを、 開発サイトの規模ごとにまとめています。 守秘義務の都合上、具体例を伏せている箇所もございますが、みなさまの Next.jsを活用した開発 への一助になれば幸いです。 テーマ
• Next.jsに精通している方 • Webサイトやメディアサイトなどの開発に関 心がある方 • Jamstackに興味がある方 ターゲット
小規模サイト コーポレートサイト・イベント特設サイト
小規模サイト コーポレートサイト・イベント特設サイト レンダリングによって変わる ホスティング先の選択肢
小規模サイト コーポレートサイト・イベント特設サイト Next.jsの機能をフル活用することを考えれば、最適なのはや はりVercel Next.jsをSSGのような使い方をするのであればその限りでは ありません。 FTPやAWS S3などでも運用が可能です。 レンダリングによって変わるホスティング先の選択肢
小規模サイト コーポレートサイト・イベント特設サイト クライアントのご要望もあって S3での対応となりました。 S3はGitHubを繋げて継続的デリバリー( CD)を組むことができません。 ですので、GitHub Actionsを用いてCDを実現する形となりました。
小規模サイト コーポレートサイト・イベント特設サイト GitHub Actionsで考慮しなければならないこと 本番環境やステージング環境に紐づくブランチのpushなどを検知 して、CDを実行する。 headlessCMSで新規作成・更新・削除の操作を受け取り、CDを 実行する。 今回利用したmicroCMSには、webhookによるGitHubActionsへの繋ぎ込み 機能がついていたのでそちらを利用いたしました。
小規模サイト コーポレートサイト・イベント特設サイト 小規模サイト開発 あまり手間暇かけずに作成することができました。 小規模サイトであれば、利用する機能的な部分をスターターキットなどにま とめてしまえば導入コストを低くした上で、webサイト制作が可能になるなと 感じました。 Next.jsをSSGだけで使うのは勿体無い気はする。SSGだけならより尖った ものが出てきているので併せて検討していきたい
中規模〜大規模サイト メディアサイト
速報性を重要視すべきか 中規模〜大規模サイト メディアサイト
速報性を重視しないページならSG 中規模〜大規模サイト メディアサイト 例:プライバシーポリシーなど更新頻度の低いページ 速報性を重視するページならISR 例:メディアの詳細ページなどコンテンツ総量が多いページ 動的な処理を実施したいならSSR 例:一覧ページや検索結果などのページ 速報性を重要視すべきか
sitemap.xmlの生成 中規模〜大規模サイト メディアサイト
この規模のsitemap.xmlは、オンデマンドに作成するページ (ISR・SSR)があるため、動的に生成する必要があります。 中規模〜大規模サイト メディアサイト sitemap.xmlの生成 実際の開発ではnext-sitemapというnpmパッケージを利用して sitemapの生成をしています。
設定を少し加えるだけでNext.jsのビルド時にsitemap.xmlを生成してくれます。 中規模〜大規模サイト メディアサイト next-sitemapの特徴 動的にsitemap.xmlを生成するための関数(getServerSideSitemap)も用意されていま す。 詳しい利用方法は割愛しますが、興味がある方は是非調べてみてください。 https://github.com/iamvishnusankar/next-sitemap#readme
microCMSでコンテンツを管理しつつ、その他サービス関連の APIを用いて、よりリッチな 体験を可能にしたメディアサイト。 Next.jsとVercelの機能をフル活用しました。 中規模〜大規模サイト メディアサイト
中規模〜大規模サイト開発 microCMSだけではなく、独自のデータベースとの連携や、その他外部サー ビスとの連携など、Jamstackの強みの一つと考えている組み合わせやす さも感じることができました。 Next.jsの各種レンダリングによって、ページの 機能に寄り添った最適な体 験をユーザに届けることができたと感じました。 中規模〜大規模サイト メディアサイト
まとめ
約1年間、WebサイトやWebアプリの開発にNext.jsを使ってみて、プ ロジェクトによって意識しなければならないことなどが変化することを 身にしみて感じました。 JamstackやNext.jsに関わり始めてインプットとアウトプットの連続で した。これからもNext.jsの扱いやJamstackのことについて深く知見 を貯めていけたらと思います。
これからのWeb開発 これまでのWebサービスは「発信」そして「共 有」と役割を広げてきましたが、 Next.jsや Jamstackの登場と進化によって、 もっとユーザーに寄り添った 「体 験」の提供にシフトしていく と私たちは考えています。
これからも の可能性を追求していきます
None
None