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
17k
RailsエンジニアのためのNext.js入門
Kazuhito Hokamura
October 22, 2021
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
2.7k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.2k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
300
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
6.9k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.5k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
820
Web Frontend Improvement in Cookpad
hokaccha
1
890
cookpad summer internship 2018 - Git
hokaccha
1
9.4k
cookpad summer internship 2018 - JavaScript
hokaccha
0
9.3k
Other Decks in Technology
See All in Technology
なぜ NOT A HOTEL が Web3 に取り組むのか - NOT A HOTEL TECH TALK
ynunokawa
0
160
強みを伸ばすキャリアデザイン
yug1224
0
200
Aurora MySQL v3(MySQL8.0互換)の オンラインDDLの罠挙動を全バージョンで検証した
yutakikai
1
150
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
Four keys改善の取り組み事例紹介
sansantech
PRO
3
230
4年前、あるじゃん老害エンジニアLT合戦に登壇、米国西海岸コンピュータ歴史博物館体験記の続編
toshi_atsumi
0
200
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
5.2k
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
430
現代CSSフレームワークの内部実装とその仕組み
poteboy
4
1.7k
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
100
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
1
380
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
140
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
Unsuck your backbone
ammeep
662
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
76
41k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Navigating Team Friction
lara
177
13k
Scaling GitHub
holman
457
140k
What's in a price? How to price your products and services
michaelherold
237
11k
The Pragmatic Product Professional
lauravandoore
24
5.8k
How STYLIGHT went responsive
nonsquared
92
4.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
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͕͖ͳΤϯδχΞͳΒ͖ʹͳΔͱࢥ͏ɺͨͿΜʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ