nextjs_x_AMP.pdf

 nextjs_x_AMP.pdf

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

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa

April 15, 2020
Tweet

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