Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
nextjs_x_AMP.pdf
Yosuke Furukawa
PRO
April 15, 2020
Programming
3
1.8k
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
48
16k
yosuke_furukawa
PRO
14
3.9k
yosuke_furukawa
PRO
69
22k
yosuke_furukawa
PRO
0
2.1k
yosuke_furukawa
PRO
0
79
yosuke_furukawa
PRO
0
34
yosuke_furukawa
PRO
0
2.1k
yosuke_furukawa
PRO
23
13k
yosuke_furukawa
PRO
2
340
Other Decks in Programming
See All in Programming
nbkouhou
0
1k
rshindo
2
300
akatsukinewgrad
0
220
azdaroth
0
140
jun0
3
670
kyonmm
2
2.2k
nrslib
20
13k
koher
7
490
loleg
0
210
466548
0
120
ufoo68
1
180
xrdnk
0
130
Featured
See All Featured
keithpitt
401
20k
matthewcrist
73
7.5k
schacon
145
6.6k
michaelherold
225
8.5k
maltzj
500
36k
mthomps
39
2.3k
productmarketing
5
660
jensimmons
207
10k
brianwarren
83
4.7k
phodgson
87
3.9k
scottboms
251
11k
malarkey
119
16k
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ྑ͘͢Δ͜ͱ͕Ͱ͖Δɻ