Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Next.js 採用の説得材料を考える
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
井内 将俊
October 30, 2023
Technology
150
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Next.js 採用の説得材料を考える
CTOA若手エンジニアコミュニティ 勉強会 #4 で登壇した資料です。
井内 将俊
October 30, 2023
More Decks by 井内 将俊
See All by 井内 将俊
業務に役立つ! ブラウザデベロッパーツールの機能紹介と活用例
iuchimasatoshi
0
590
ReactメインのチームにNext.jsを導入した道のり
iuchimasatoshi
1
3.1k
新卒研修でNext.js AppRouterを導入した 学びと反省
iuchimasatoshi
3
3.1k
Other Decks in Technology
See All in Technology
20260906 「AWS運用入門」著者が教える、運用業務への生成AI活用入門
masaruogura
0
260
山手線を徒歩で一周してわかった、 位置情報アプリは「足」が最強のデバッガー
hinakko
0
110
クロスボーダーM&AのValue Upを支えるプロダクト開発。日米チームのハブになったプロダクトエンジニアの実践 / Product Engineering Conference 2026
genda
0
120
TinyGo 開発サイクルを高速化する:Go で作るエミュレータ入門
zozotech
PRO
1
620
AIネイティブプロダクトで顧客価値を最大化するプロダクトエンジニアとFDEの協働
righttouch
PRO
0
230
Gitは怖い?共有ワークスペースから始めるSnowflakeチーム開発
coco_se
0
130
アリアドネの糸と、20年ごとの建て替え ── 長尾真『電子図書館』を、伊勢で読み直す / Rereading Makoto Nagao’s "Electronic Library" in Ise
ykiyota
0
160
Omarchy Quattro の日本語設定周り
simosako
2
140
なぜSRE・セキュリティは評価されないのか?守りの組織を事業成長エンジンに変えた実践
cscengineer
PRO
3
2.5k
module Synths; end
asonas
1
130
Amazon S3 Tablesに全部任せてみた結果——コンパクション/スナップショット管理は本当に手放せるか
shigeruoda
1
470
Multica × 長期記憶:40個のミニプロジェクト管理
eiei114
1
240
Featured
See All Featured
Docker and Python
trallard
47
4.2k
Chasing Engaging Ingredients in Design
codingconduct
0
310
Design in an AI World
tapps
1
310
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
6
1.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
232
55k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.4k
How GitHub (no longer) Works
holman
316
150k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
67k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.3k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
410
Transcript
Next.js 採用の説得材料を考える 井内 将俊(ペンギン丸) 1
自己紹介 井内将俊(いうち まさとし) X:@pengin_engineer (ペンギン丸) 合同会社DMM.com(23新卒) バーチャルライブチャット → フロントエンド 開発 2
ところで皆さん 3
技術選定してますか? 4
学生〜研修期間の技術選定イメージ 新しい技術! 面白そうな 技術! 使ったことのあ る技術 学びたい技術 よく聞く技術 何か カッコいい
技術 5
これを業務でやると 6
業務での技術選定のイメージ図 長期的に 負債にならな いか...? 運用 コストが高くな いか...? 学習コストが高 くないか...? 採用面で
魅力的か...? 7
「業務で」 「説得力のある」 「技術選定」 難しい... 8
Reactしか使ってないチームの 新規開発で Next.jsを採用する説得材料 🤔 9
技術選定することになった経緯 新卒研修でNext.js、AppRouter、SSR/SSG に触れる こうやってSSRを活 用するんだ! 楽しい! 10
技術選定することになった経緯 配属先でモノレポ React フロントエンドへ触れる スン... 11
技術選定することになった経緯 モノレポリポジトリとは別に、新規リポジトリでサブ的な機 能をReactで実装予定と聞く 新しくリポジトリを作る.... 今まで通りReactで.... 12
技術選定することになった経緯 Next.js使いましょう! うーん 理由は? …SSRとか便利ですし SSRするってことは 専用のサーバーを追加して運 用するってこと? その運用コスト以上の メリットがNext.jsにあるの? 13
技術選定することになった経緯 - Reactで問題なく運用できている - SEO対策も不要 - Next 導入したらNode.jsサーバーを 追加で運用? メリットが無い...
14
Next.jsを使うことで追加でサーバーが 必要なら、Next.jsは無理か... 15
Next.jsを使うことで追加でサーバーが 必要なら、Next.jsは無理か... 勉強不足! 16
SSR用のNode.jsサーバーを 用意しなくても Next.jsは利用可能....! 17
Next.jsで静的出力 18
SSRは行えないので 素のReactとそんなに違いがない...? Next.js採用のメリットは...? 19
Next.jsを採用するメリット 引用:React公式ドキュメント20
Next.jsを採用するメリット 引用:React公式ドキュメント21
Next.jsを採用する説得材料 - Next.jsを導入するからといって Node.jsサーバーを運用する必要があるわけではない - 今後は素のReactではなくNext.js等のフレームワークを 用いたReact活用が主流となってくる 22
Next.jsを採用する説得材料 - Next.jsを導入するからといって Node.jsサーバーを運用する必要があるわけではない - 今後は素のReactではなくNext.js等のフレームワークを 用いたReact活用が主流となってくる 無事新規開発の技術にNext.jsを採用🎉 23
今回の学び - 技術選定は客観的な事実を元に行う - 最新の技術のキャッチアップが欠かせない - 先輩や同期に頼り、知見を聞かせてもらうことも大切 24
ご清聴ありがとうございました! 25