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
nextjs_x_AMP.pdf
Search
Yosuke Furukawa
PRO
April 15, 2020
Programming
3
10k
nextjs_x_AMP.pdf
PWA Night で発表した Next.js x AMP の話です。
Yosuke Furukawa
PRO
April 15, 2020
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
150
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.4k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.3k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
270
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.9k
Strip Types と Storage
yosuke_furukawa
PRO
4
430
Module Harmony について
yosuke_furukawa
PRO
3
1.8k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
CSC509 Lecture 05
javiergs
PRO
0
300
Catch Up: Go Style Guide Update
andpad
0
230
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
220
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
220
株式会社 Sun terras カンパニーデック
sunterras
0
370
Cursorハンズオン実践!
eltociear
2
1.1k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.3k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
190
CSC509 Lecture 04
javiergs
PRO
0
300
CSC305 Lecture 05
javiergs
PRO
0
220
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
CSC305 Lecture 06
javiergs
PRO
0
250
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Designing for humans not robots
tammielis
254
26k
Why Our Code Smells
bkeepers
PRO
340
57k
Site-Speed That Sticks
csswizardry
13
910
Building Applications with DynamoDB
mza
96
6.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
Next.js x AMP 2020/04/14 @ PWA Night LT
Twitter: @yosuke_furukawa Github: yosuke-furukawa
Next.js is … • a React framework • powered by
zeit
AMP is … • Accelerated Mobile Pages • AMPͷϧʔϧʹ४ڌͨ͠ΣϒϖʔδΛ࡞Δ͜ͱͰɺ AMP
cache ͱݺΕΔαʔό͔ΒΣϒϖʔδΛ৴ͯ͘͠ΕΔ • AMP ͷϧʔϧ amp-validator ͱݺΕΔνΣοΫπʔϧ͕ νΣοΫ͢Δɻ͜ΕΛ pass ͠ͳ͍ͱ AMP CacheʹΒͳ͍ɻ • AMPͷλά amp-* Ͱ࢝·Δ webcomponent ͷλά܈͕͋ ΓɺͦΕΒΛ͏͜ͱͰϦονͳΛ࡞ΕΔΑ͏ʹͳΔɻ
AMP Examples
AMP Examples ׂͱԿͰ͋ΔͷͰɺ AMP͚ͩͰ͍Ζ͍Ζ࡞ΕΔɻ
Now ෆ۩߹ରԠத….
Next.js supports AMP on v8.1
Next.js supports AMP on v8.1 ྆ऀ͕ձ߹ͨ͠ॠؒ
ҰݸΞϓϦΛ࡞ͬͯΈͨͷͰײΛڞ༗͍ͨ͠
AMP͏͚Ͳɺ AMP Cache Θͳ͍ͱ͍ ͏͔ͳΓಛघͳঢ়گ
Next.js x AMP // ͪͳΈʹɺΔ͚ͩͳΒ؆୯ // pages/index.js function HomePage() {
return <p>Welcome to AMP + Next.js.</p> } export default withAmp(HomePage)
Next.js x AMP inside • Next.js AMP ྑ͘ѱ͘தͰͬͯΔ͜ͱ͕ Ӆṭ͞Ε͍ͯΔ(ϑϨʔϜϫʔΫͱͯͨ͠Γલ)ɻ
• ҰํͰதͰͬͯΔ͜ͱ͕Θ͔Βͳ͍ڪා͋Δ ͱࢥ͏ • தͰͬͯΔ͜ͱશ෦Λ͑Δͷ͍͠ͷͰɺ AMPɺNext.jsͱʹ͔͍ͭ·ΜͰղઆ͢Δ
Next.jsͷSSGͷ৭ʑ
production / development • جຊతʹ production mode ͱ development mode
Ͱ ఱͱ΄Ͳͷ͕ࠩ͋Δ͘Β͍ಈ͖͕ҟͳΔ • Next.js production mode ʹͳΔͱ੩తͳαΠτͰ͋ Εࣗಈతʹ੩తͳ `html` ʹม͠ɺ React ͷαʔόα ΠυϨϯμϦϯάͷॲཧΛεΩοϓ͢Δ • develop mode ͷ߹ຖճϏϧυ͠ɺReactͷαʔό αΠυϨϯμϦϯά͕࣮ߦ͞ΕΔ
Next.js automatic static site generation • Next.js ͰجຊతʹϏϧυ࣌ʹ੩తͳϖʔδΛ࡞Γ͕ͨΔɻ • `getInitialProps`
ͱ͍͏ϝιου͕ page ίϯϙʔωϯτʹੜ ͍͑ͯΕಈతɺͦ͏͡Όͳ͔ͬͨΒ੩తͳϖʔδͱΈͳ͢ɻ • ੩తͳϖʔδͰ͋Εɺ build ࣌ʹ html ΛՌͱͯ͠࡞ͬ ͯ͠·͍ɺҎޙϦΫΤετ͕དྷͨΒͦΕ͔͠ฦ͞ͳ͍ɻ • ಈతͳϖʔδʹͳΔͱຖճ React ͷ renderToString ͕Δͷ Ͱෛՙ͔͔Δɻ
Next.js automatic static site generation • Next.js ͰجຊతʹϏϧυ࣌ʹ੩తͳϖʔδΛ࡞Γ͕ͨΔɻ • `getInitialProps`
ͱ͍͏ϝιου͕ page ίϯϙʔωϯτʹੜ ͍͑ͯΕಈతɺͦ͏͡Όͳ͔ͬͨΒ੩తͳϖʔδͱΈͳ͢ɻ • ੩తͳϖʔδͰ͋Εɺ build ࣌ʹ html ΛՌͱͯ͠࡞ͬ ͯ͠·͍ɺҎޙϦΫΤετ͕དྷͨΒͦΕ͔͠ฦ͞ͳ͍ɻ • ಈతͳϖʔδʹͳΔͱຖճ React ͷ renderToString ͕Δͷ Ͱෛՙ͔͔Δɻ ͳΔ͘੩తʹ͍͕ͨ͠ɺجຊతʹ͍͠ͷ Ͱͦ͜·ͰؤுΔඞཁͳ͠ɻ
࠷ۙͩͱ • Next Generation Static Site Generation͕ೖͬͨ • `getStaticProps`, `getStaticPaths`
Ͱʮbuild࣌ʹAPI͔ Βpropsऔ͖ͬͯͯ HTML ʹ͢Δʯͱ͔Ͱ͖Δ
ͨͩ͠ • جຊతʹ੩తϖʔδʹ͍ͨ͠ͱͯ͠ɺׂͱࠓ࣌ Ͱ͍͠ɻ • (Ϗϧυ࣌ʹͨ͘͞Μ͋ΔϖʔδΛશ෦Ұؾʹ࡞Δͬͯ ϏϧυαʔόͷϦιʔεͲ͏ݟੵΕ…) • StyledComponentsͳͲɺSSRͷϦΫΤετΛىʹ ಈ͘ͷ͕ଟ͘ɺ·ͩ੩తϏϧυʹ͑ͳ͔ͬͨΓ
͢Δɻ
ͨͩ͠ • جຊతʹ੩తϖʔδʹ͍ͨ͠ͱͯ͠ɺׂͱࠓ࣌ Ͱ͍͠ɻ • (Ϗϧυ࣌ʹͨ͘͞Μ͋ΔϖʔδΛશ෦Ұؾʹ࡞Δͬͯ ϏϧυαʔόͷϦιʔεͲ͏ݟੵΕ…) • StyledComponentsͳͲɺSSRͷϦΫΤετΛىʹ ಈ͘ͷ͕ଟ͘ɺ·ͩ੩తϏϧυʹ͑ͳ͔ͬͨΓ
͢Δɻ
Next.js x AMPͷ৭ʑ
AMP Validator • Next.js ։ൃ࣌ɺதͰ AMP ͷ Validator ͕ৗʹಈ͘ɻ •
։ൃதʹ AMP invalid ͳঢ়ଶʹͳͬͨΒౖΒΕΔ • զʑͷΞϓϦέʔγϣϯͰҰ୴ AMP invalid ͳঢ়ଶʹͨ͠ ͔ͬͨͷͰɺ invalid ͩͱৗʹౖΒΕଓ͚Δɻ • Θ͔ͬͨ͠ͷͰɺValidator ΧελϚΠζͰ͖ΔΑ͏ʹͨ͠ɻ • https://github.com/zeit/next.js/pull/9191
AMP Optimizer • Next.js ͷ production mode Ͱ AMP Optimizer
͕SSRதʹຖճඞ࣮ͣߦ͞ΕΔɻ • ͔ͳΓॏ͍ॲཧͳͷͰɺຖճ࣮ߦ͢ΔΜͰ ͳ͍ɻ • SSR͕ॏ͍ॲཧ x AMP Optimizer ॏ͍ॲཧ = Ϋιॏ͍
AMP Optimizer • AMPϖʔδͷϨϯμϦϯάΛߴԽ͢Δεά ϨϞϊ • ࣗಈతʹresourceͷpreloadͱ͔ͯ͘͠ΕΔ
AMP Optimizer • Next.js ͷ production mode Ͱ AMP Optimizer
͕SSRதʹຖճඞ࣮ͣߦ͞ΕΔɻ • ͔ͳΓॏ͍ॲཧͳͷͰɺຖճ࣮ߦ͢ΔΜͰ ͳ͍ɻ • SSR͕ॏ͍ॲཧ x AMP Optimizer ॏ͍ॲཧ = Ϋιॏ͍
AMP Optimizer ͭ·Δͱ͜ΖɺCDNͰΩϟογϡ͞ΕΔͷલఏ ͷॲཧΛຖճͬͯ͠·͏ͷͰɺݫ͍͠
AMP Optimizer • ͳͷͰɺ͜ΕΧελϚΠζͰ͖ΔΑ͏ʹPR Λग़ͨ͠ɻ • https://github.com/zeit/next.js/pull/10705
Next.js x AMP ·ͱΊ
ଞʹ৭ʑ • AMPͰϕετϓϥΫςΟεͷείΞ͕͍ • मਖ਼ͨ͠: https://github.com/ampproject/ amphtml/pull/26876 • TypeScript ͷܕ͕ͳ͍ͱ͔
• ී௨ʹࠓݱ࣌Ͱෆ۩߹͕ى͖ͯΔΑʂʂʂʂ
·ͱΊ
·ͱΊ • Next.js x AMP ݁ߏେม͕ͩɺதΛ্ͬͨͰOSSʹ ίϯτϦϏϡʔτ͍ͯ͘͜͠ͱͰमਖ਼͠ͳ͕Βઓ͍ͬͯ Δɻ • ͜͏͍͏Τοδͳͷʹઓ͢Δ߹ɺੈքʹ·ͩͳ͍
ʹͿͪͨΔ͜ͱʹͳΔɻ • ੈքʹ·ͩͳ͍ܦݧΛ্͛Δ֨ͷػձɺOSS ʹߩݙ͢Δ͜ͱͰੈքΛ1mmྑ͘͢Δ͜ͱ͕Ͱ͖Δɻ