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
RailsエンジニアのためのNext.js入門
Search
Kazuhito Hokamura
October 22, 2021
Technology
7
19k
RailsエンジニアのためのNext.js入門
Kazuhito Hokamura
October 22, 2021
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
3.8k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.2k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.3k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
350
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.7k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
890
Web Frontend Improvement in Cookpad
hokaccha
1
990
cookpad summer internship 2018 - Git
hokaccha
1
9.6k
Other Decks in Technology
See All in Technology
マルチテナントのサービスインフラに大きなテナントを受け入れるまで
7474
0
410
塩野義製薬様のAWS統合管理戦略:Organizations設計と運用の具体例
tkikuchi
0
300
KongによるAPIライフサイクル マネジメント
hashitokyo
1
160
LLMOps : ΔMLOps
shuntaito
5
770
Do you know “Environment Variables” ?
akimiya
0
140
CData Virtuality を活かせるキーシナリオと製品デモ
cdataj
0
430
SOLID - Architecture and Architectural Decisions - Devfest Goa 2024
rivuchk
0
150
Grafana エコシステムの活用事例 on ABEMA
tetsuya28
5
710
データ分析基盤のためにS3を深堀りする~アーキテクチャ設計の考え方のヒントに~
nrinetcom
PRO
1
740
暴カワでビデオシンセサイザーを導入する技術
yuchi
2
120
パートナー企業のテクニカルサポートエンジニアとして気になる、より良い AWS サポートの利活用について
kazzpapa3
0
180
テストを楽に書きたい
tomorrowkey
2
260
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Being A Developer After 40
akosma
85
590k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.8k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Rails Girls Zürich Keynote
gr2m
93
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Done Done
chrislema
181
16k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
RailsΤϯδχΞͷͨΊͷ Next.jsೖ Kaigi on Rails 2021
Ubie Discovery Kazuhito Hokamura @hokaccha @hokaccha
ࠓͷ 1. Next.jsͱԿ͔ 2. Next.jsͷػೳɾಛ
Next.jsͱԿ͔
None
None
Next.js gives you the best developer experience with all the
features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
Next.jsRailsΛஔ͖͑ΔΑ͏ͳͷʁ
🙅
None
None
ͳͥNext.jsΛ͏ͷ͔
RailsϑϩϯτΤϯυͷϖΠϯ • ಠࣗ࿏ઢͳٕज़ελοΫ • JavaScriptͱhaml/erb͕ࠞ͟Δ • JavaScriptͰඳը͢Δ෦ͷPre Rendering͕ࠔ
Next.jsͩͱ • σϑΝΫτελϯμʔυͳٕज़͔ͭߴ͍։ൃମݧͷڥͰ։ൃͰ͖Δ • JavaScriptʢTypeScriptʣ͚ͩͰϑϩϯτΤϯυ͕݁͢Δ • Pre Rendering͕؆୯ʹ࣮ݱͰ͖Δ
͔͠͠Next.js͚ͩͩͱ • DBͷૢ࡞ϨΠϠʔ͕ͳ͍ • Blitz.jsͷΑ͏ͳϑϨʔϜϫʔΫ͕͋Δ͚Ͳ·ͩະख़
RailsͳͲͱΈ߹Θͤͯ͏ͷ͕ݱঢ়ͩͱϕλʔ
ΞʔΩςΫνϟͷྫ
👩💻 Frontend API Database
👩💻
👩💻
👩💻
͜͜·Ͱͷ·ͱΊ • Next.jsϑϩϯτΤϯυΛओ؟ʹ͓͍ͨϑϨʔϜϫʔΫ • RailsΛͦͷ··ஔ͖͑ΔΑ͏ͳͷͰͳ͍ • όοΫΤϯυ͕ಘҙͳϑϨʔϜϫʔΫͱΈ߹Θͤͯ͏ͷ͕Α͍
Next.jsͷػೳ
ಛతͳػೳ • Zero con fi g • File-system Routing •
Performance Optimization • Pre Rendering
Zero Con fi g
1. ඞཁͳϞδϡʔϧΛΠϯετʔϧ 2. React ComponentΛ࡞Δ 3. next dev Λ࣮ߦ͢Δ Ҏ্ɻ
File-system Routing
GET / GET /posts GET /posts/:id
GET / GET /posts GET /posts/:id
pages/posts/[id].tsx
Performance Optimization
͜͜Ͱ͍͏ύϑΥʔϚϯε Core Web Vitalsతͳҙຯ
Next.jsͷύϑΥʔϚϯε࠷దԽ • σϑΥϧτͰ༷ʑͳϕετϓϥΫςΟεͷద༻ • Code splitting, Critical Rendering Path࠷దԽ, etc...
• next/imageʹΑΔCLS࠷దԽ • next/linkʹΑΔը໘ભҠͷύϑΥʔϚϯε࠷దԽ • Pre RenderingʹΑΔFCP/LCPͷ࠷దԽ
Pre Rendering
Client Side Rendering
Client Side Rendering • ॳظඳըͷύϑΥʔϚϯε͕Ͱͳ͍ • JavaScriptΛ࣮ߦ͠ͳ͍ΫϥΠΞϯτʹऑ͍ʢOGP, SEOʣ
ͦ͜ͰPre Rendering • αʔόʔͰHTMLΛ࡞ͬͯฦ͢ → Server Side Rendering • ͋Β͔͡ΊHTMLΛ࡞͓͍ͬͯͯฦ͢
→ Static Site Generation
࣮ɺӡ༻͕࠷γϯϓϧɻύϑΥʔϚϯεOGPΛؾʹ͠ͳ͍Ͱ͍͍έʔεͰબͿ ύϑΥʔϚϯε࠷ڧɻ੩తʹੜͰ͖ͯύϑΥʔϚϯεʹͩ͜ΘΓ͍ͨέʔεͰ͜Ε ੩తʹੜ͢Δͷແཧ͚ͩͲॳظඳըͷύϑΥʔϚϯεOGP୲อ͍ͨ͠߹ʹ࠷ऴతʹબͿɻ ͦ͏͍͏έʔεͦΕͳΓʹ͋Δ🥲 Client Side Rendering Static Site Generation
Server Side Rendering ※ Incremental Static Regeneration ͱ͍͏ͷ͋Δ͚Ͳ࣌ؒͷ߹ͰׂѪ
SSR, SSG, CSRซ༻Մೳ • ಈతʹσʔλ͕มΘΔϖʔδSSR • ࣄલʹσʔλ͕Θ͔ΔϔϧϓϖʔδSSG • ύϑΥʔϚϯεOGPΛؾ͠ͳ͍ཧը໘CSR
Server Side Rendering ϦΫΤετΛड͚ͨͱ͖ʹ getServerSideProps͕࣮ߦ ͞ΕΔͷͰpropsΛ࡞ͬͯ͢
Static Site Generation Ϗϧυ࣌ʹgetStaticPathsͱ getStaticProps͕ݺΕͯಈత ʹ੩తϑΝΠϧΛੜ͢Δ
·ͱΊ
·ͱΊ • Next.jsRailsΛஔ͖͑ΔͷͰͳ͘ڞଘ͍ͯ͘͠ͷ • Next.jsͷ։ൃମݧେมΑ͍ͷͰҰճͬͯΈͯ΄͍͠ • Rails͕͖ͳΤϯδχΞͳΒ͖ʹͳΔͱࢥ͏ɺͨͿΜʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ