nextjs_x_AMP.pdf

PWA Night で発表した Next.js x AMP の話です。

Transcript

1. Next.js x AMP 2020/04/14 @ PWA Night LT
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. Next.js is … • a React framework • powered by zeit
4. AMP is … • Accelerated Mobile Pages • AMPͷϧʔϧʹ४ڌͨ͠΢ΣϒϖʔδΛ࡞Δ͜ͱͰɺ AMP cache ͱݺ͹ΕΔαʔό͔Β΢ΣϒϖʔδΛ഑৴ͯ͘͠ΕΔ • AMP ͷϧʔϧ͸ amp-validator ͱݺ͹ΕΔνΣοΫπʔϧ͕ νΣοΫ͢Δɻ͜ΕΛ pass ͠ͳ͍ͱ AMP Cacheʹ͸৐Βͳ͍ɻ • AMPͷλά͸ amp-* Ͱ࢝·Δ webcomponent ͷλά܈͕͋ ΓɺͦΕΒΛ࢖͏͜ͱͰϦονͳ෺Λ࡞ΕΔΑ͏ʹͳΔɻ
5. AMP Examples
6. AMP Examples ׂͱԿͰ΋͋ΔͷͰɺ 
 AMP͚ͩͰ΋͍Ζ͍Ζ࡞ΕΔɻ
7. Now ෆ۩߹ରԠத….
8. Next.js supports AMP on v8.1
9. Next.js supports AMP on v8.1 ྆ऀ͕ձ߹ͨ͠ॠؒ
10. ҰݸΞϓϦΛ࡞ͬͯΈͨͷͰײ૝Λڞ༗͍ͨ͠
11. AMP͸࢖͏͚Ͳɺ AMP Cache ͸࢖Θͳ͍ͱ͍ ͏͔ͳΓಛघͳঢ়گ
12. Next.js x AMP // ͪͳΈʹɺ΍Δ͚ͩͳΒ௒؆୯ // pages/index.js function HomePage() { return <p>Welcome to AMP + Next.js.</p> } export default withAmp(HomePage)
13. Next.js x AMP inside • Next.js ΋ AMP ΋ྑ͘΋ѱ͘΋தͰ΍ͬͯΔ͜ͱ͕ Ӆṭ͞Ε͍ͯΔ(ϑϨʔϜϫʔΫͱͯ͠౰ͨΓલ)ɻ • ҰํͰதͰ΍ͬͯΔ͜ͱ͕Θ͔Βͳ͍ڪා΋͋Δ ͱࢥ͏ • தͰ΍ͬͯΔ͜ͱશ෦Λ఻͑Δͷ͸೉͍͠ͷͰɺ AMPɺNext.jsͱ΋ʹ͔͍ͭ·ΜͰղઆ͢Δ
14. Next.jsͷSSGͷ໰୊৭ʑ
15. production / development • جຊతʹ production mode ͱ development mode Ͱ͸ ఱͱ஍΄Ͳͷ͕ࠩ͋Δ͘Β͍ಈ͖͕ҟͳΔ • Next.js ͸ production mode ʹͳΔͱ੩తͳαΠτͰ͋ Ε͹ࣗಈతʹ੩తͳ `html` ʹม׵͠ɺ React ͷαʔόα ΠυϨϯμϦϯάͷॲཧΛεΩοϓ͢Δ • develop mode ͷ৔߹͸ຖճϏϧυ͠ɺReactͷαʔό αΠυϨϯμϦϯά͕࣮ߦ͞ΕΔ
16. Next.js automatic static site generation • Next.js Ͱ͸جຊతʹϏϧυ࣌ʹ੩తͳϖʔδΛ࡞Γ͕ͨΔɻ • `getInitialProps` ͱ͍͏ϝιου͕ page ίϯϙʔωϯτʹੜ ͍͑ͯΕ͹ಈతɺͦ͏͡Όͳ͔ͬͨΒ੩తͳϖʔδͱΈͳ͢ɻ • ੩తͳϖʔδͰ͋Ε͹ɺ build ࣌ʹ html Λ੒Ռ෺ͱͯ͠࡞ͬ ͯ͠·͍ɺҎޙϦΫΤετ͕དྷͨΒͦΕ͔͠ฦ͞ͳ͍ɻ • ಈతͳϖʔδʹͳΔͱຖճ React ͷ renderToString ͕૸Δͷ Ͱෛՙ͸͔͔Δɻ
17. Next.js automatic static site generation • Next.js Ͱ͸جຊతʹϏϧυ࣌ʹ੩తͳϖʔδΛ࡞Γ͕ͨΔɻ • `getInitialProps` ͱ͍͏ϝιου͕ page ίϯϙʔωϯτʹੜ ͍͑ͯΕ͹ಈతɺͦ͏͡Όͳ͔ͬͨΒ੩తͳϖʔδͱΈͳ͢ɻ • ੩తͳϖʔδͰ͋Ε͹ɺ build ࣌ʹ html Λ੒Ռ෺ͱͯ͠࡞ͬ ͯ͠·͍ɺҎޙϦΫΤετ͕དྷͨΒͦΕ͔͠ฦ͞ͳ͍ɻ • ಈతͳϖʔδʹͳΔͱຖճ React ͷ renderToString ͕૸Δͷ Ͱෛՙ͸͔͔Δɻ ͳΔ΂͘੩తʹ౗͍͕ͨ͠ɺجຊతʹ೉͍͠ͷ Ͱͦ͜·ͰؤுΔඞཁͳ͠ɻ
18. ࠷ۙͩͱ • Next Generation Static Site Generation͕ೖͬͨ • `getStaticProps`, `getStaticPaths` Ͱʮbuild࣌ʹAPI͔ Βpropsऔ͖ͬͯͯ HTML ʹ͢Δʯͱ͔΋Ͱ͖Δ
19. ͨͩ͠ • جຊతʹ͸੩తϖʔδʹ͍ͨ͠ͱͯ͠΋ɺׂͱࠓ࣌఺ Ͱ͸೉͍͠ɻ • (Ϗϧυ࣌ʹͨ͘͞Μ͋ΔϖʔδΛશ෦Ұؾʹ࡞Δͬͯ ϏϧυαʔόͷϦιʔεͲ͏ݟੵ΋Ε͹…) • StyledComponentsͳͲɺSSRͷϦΫΤετΛى఺ʹ ಈ͘΋ͷ͕ଟ͘ɺ·ͩ੩తϏϧυʹ͸࢖͑ͳ͔ͬͨΓ ͢Δɻ
20. ͨͩ͠ • جຊతʹ͸੩తϖʔδʹ͍ͨ͠ͱͯ͠΋ɺׂͱࠓ࣌఺ Ͱ͸೉͍͠ɻ • (Ϗϧυ࣌ʹͨ͘͞Μ͋ΔϖʔδΛશ෦Ұؾʹ࡞Δͬͯ ϏϧυαʔόͷϦιʔεͲ͏ݟੵ΋Ε͹…) • StyledComponentsͳͲɺSSRͷϦΫΤετΛى఺ʹ ಈ͘΋ͷ͕ଟ͘ɺ·ͩ੩తϏϧυʹ͸࢖͑ͳ͔ͬͨΓ ͢Δɻ
21. Next.js x AMPͷ໰୊৭ʑ
22. AMP Validator • Next.js ։ൃ࣌ɺதͰ AMP ͷ Validator ͕ৗʹಈ͘ɻ • ։ൃதʹ AMP invalid ͳঢ়ଶʹͳͬͨΒౖΒΕΔ • զʑͷΞϓϦέʔγϣϯͰ͸Ұ୴ AMP invalid ͳঢ়ଶʹͨ͠ ͔ͬͨͷͰɺ invalid ͩͱৗʹౖΒΕଓ͚Δɻ • ൥Θ͔ͬͨ͠ͷͰɺValidator ΧελϚΠζͰ͖ΔΑ͏ʹͨ͠ɻ • https://github.com/zeit/next.js/pull/9191
23. AMP Optimizer • Next.js ͷ production mode Ͱ͸ AMP Optimizer ͕SSRதʹຖճඞ࣮ͣߦ͞ΕΔɻ • ͔ͳΓॏ͍ॲཧͳͷͰɺຖճ࣮ߦ͢Δ΋ΜͰ͸ ͳ͍ɻ • SSR͕ॏ͍ॲཧ x AMP Optimizer ΋ॏ͍ॲཧ = Ϋιॏ͍
24. AMP Optimizer • AMPϖʔδͷϨϯμϦϯάΛߴ଎Խ͢Δεά ϨϞϊ • ࣗಈతʹresourceͷpreloadͱ͔ͯ͘͠ΕΔ
25. AMP Optimizer • Next.js ͷ production mode Ͱ͸ AMP Optimizer ͕SSRதʹຖճඞ࣮ͣߦ͞ΕΔɻ • ͔ͳΓॏ͍ॲཧͳͷͰɺຖճ࣮ߦ͢Δ΋ΜͰ͸ ͳ͍ɻ • SSR͕ॏ͍ॲཧ x AMP Optimizer ΋ॏ͍ॲཧ = Ϋιॏ͍
26. AMP Optimizer ͭ·Δͱ͜ΖɺCDNͰΩϟογϡ͞ΕΔͷલఏ ͷॲཧΛຖճ΍ͬͯ͠·͏ͷͰɺݫ͍͠
27. AMP Optimizer • ͳͷͰɺ͜Ε΋ΧελϚΠζͰ͖ΔΑ͏ʹPR Λग़ͨ͠ɻ • https://github.com/zeit/next.js/pull/10705
28. Next.js x AMP ·ͱΊ
29. ଞʹ΋৭ʑ • AMPͰϕετϓϥΫςΟεͷείΞ͕௿͍໰୊ • मਖ਼ͨ͠: https://github.com/ampproject/ amphtml/pull/26876 • TypeScript ͷܕ͕ͳ͍ͱ͔ • ී௨ʹࠓݱ࣌఺Ͱෆ۩߹͕ى͖ͯΔΑʂʂʂʂ
30. ·ͱΊ
31. ·ͱΊ • Next.js x AMP ݁ߏେม͕ͩɺத਎Λ஌্ͬͨͰOSSʹ ίϯτϦϏϡʔτ͍ͯ͘͜͠ͱͰमਖ਼͠ͳ͕Βઓ͍ͬͯ Δɻ • ͜͏͍͏Τοδͳ΋ͷʹ௅ઓ͢Δ৔߹ɺੈքʹ·ͩͳ͍ ໰୊ʹͿͪ౰ͨΔ͜ͱʹͳΔɻ • ੈքʹ·ͩͳ͍໰୊͸ܦݧ஋Λ্͛Δ֨޷ͷػձɺOSS ʹߩݙ͢Δ͜ͱͰੈքΛ1mmྑ͘͢Δ͜ͱ͕Ͱ͖Δɻ