nextjs_x_AMP.pdf

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ྑ͘͢Δ͜ͱ͕Ͱ͖Δɻ