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
20k
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
4.6k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.5k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.5k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
420
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.2k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.9k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
980
Web Frontend Improvement in Cookpad
hokaccha
1
1.1k
cookpad summer internship 2018 - Git
hokaccha
1
9.7k
Other Decks in Technology
See All in Technology
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
3
1.1k
AIのAIによるAIのための出力評価と改善
chocoyama
0
490
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
220
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
200
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
270
UIテスト自動化サポート- Testbed for XCUIAutomation practice
notoroid
0
110
IIWレポートからみるID業界で話題のMCP
fujie
0
720
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
370
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
170
エンジニア向け技術スタック情報
kauche
0
110
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
belongadmin
3
170
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
d120145
0
210
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Gamification - CAS2011
davidbonilla
81
5.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Docker and Python
trallard
44
3.4k
A designer walks into a library…
pauljervisheath
206
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
Designing Experiences People Love
moore
142
24k
GraphQLとの向き合い方2022年版
quramy
46
14k
Practical Orchestrator
shlominoach
188
11k
The Cost Of JavaScript in 2023
addyosmani
51
8.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͕͖ͳΤϯδχΞͳΒ͖ʹͳΔͱࢥ͏ɺͨͿΜʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ