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
160
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.5k
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
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
NIKKEI Tech Talk#38
cipepser
0
240
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
810
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
理論と実務のギャップを超える
eycjur
0
180
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
Software Architecture
hschwentner
6
2.3k
What's new in Spring Modulith?
olivergierke
1
170
CSC305 Lecture 09
javiergs
PRO
0
310
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
CSC305 Lecture 11
javiergs
PRO
0
270
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Designing for Performance
lara
610
69k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
GitHub's CSS Performance
jonrohan
1032
470k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
For a Future-Friendly Web
brad_frost
180
10k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
RailsConf 2023
tenderlove
30
1.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
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ྑ͘͢Δ͜ͱ͕Ͱ͖Δɻ