Upgrade to Pro — share decks privately, control downloads, hide ads and more …

nextjs_x_AMP.pdf

 nextjs_x_AMP.pdf

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

Yosuke Furukawa

April 15, 2020
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. Next.js x AMP
    2020/04/14 @ PWA Night LT

    View full-size slide

  2. Twitter: @yosuke_furukawa
    Github: yosuke-furukawa

    View full-size slide

  3. Next.js is …
    • a React framework
    • powered by zeit

    View full-size slide

  4. AMP is …
    • Accelerated Mobile Pages
    • AMPͷϧʔϧʹ४ڌͨ͠΢ΣϒϖʔδΛ࡞Δ͜ͱͰɺ AMP
    cache ͱݺ͹ΕΔαʔό͔Β΢ΣϒϖʔδΛ഑৴ͯ͘͠ΕΔ
    • AMP ͷϧʔϧ͸ amp-validator ͱݺ͹ΕΔνΣοΫπʔϧ͕
    νΣοΫ͢Δɻ͜ΕΛ pass ͠ͳ͍ͱ AMP Cacheʹ͸৐Βͳ͍ɻ
    • AMPͷλά͸ amp-* Ͱ࢝·Δ webcomponent ͷλά܈͕͋
    ΓɺͦΕΒΛ࢖͏͜ͱͰϦονͳ෺Λ࡞ΕΔΑ͏ʹͳΔɻ

    View full-size slide

  5. AMP Examples

    View full-size slide

  6. AMP Examples
    ׂͱԿͰ΋͋ΔͷͰɺ 

    AMP͚ͩͰ΋͍Ζ͍Ζ࡞ΕΔɻ

    View full-size slide

  7. Now ෆ۩߹ରԠத….

    View full-size slide

  8. Next.js supports AMP on v8.1

    View full-size slide

  9. Next.js supports AMP on v8.1
    ྆ऀ͕ձ߹ͨ͠ॠؒ

    View full-size slide

  10. ҰݸΞϓϦΛ࡞ͬͯΈͨͷͰײ૝Λڞ༗͍ͨ͠

    View full-size slide

  11. AMP͸࢖͏͚Ͳɺ AMP Cache ͸࢖Θͳ͍ͱ͍
    ͏͔ͳΓಛघͳঢ়گ

    View full-size slide

  12. Next.js x AMP
    // ͪͳΈʹɺ΍Δ͚ͩͳΒ௒؆୯
    // pages/index.js
    function HomePage() {
    return Welcome to AMP + Next.js.
    }
    export default withAmp(HomePage)

    View full-size slide

  13. Next.js x AMP inside
    • Next.js ΋ AMP ΋ྑ͘΋ѱ͘΋தͰ΍ͬͯΔ͜ͱ͕
    Ӆṭ͞Ε͍ͯΔ(ϑϨʔϜϫʔΫͱͯ͠౰ͨΓલ)ɻ
    • ҰํͰதͰ΍ͬͯΔ͜ͱ͕Θ͔Βͳ͍ڪා΋͋Δ
    ͱࢥ͏
    • தͰ΍ͬͯΔ͜ͱશ෦Λ఻͑Δͷ͸೉͍͠ͷͰɺ
    AMPɺNext.jsͱ΋ʹ͔͍ͭ·ΜͰղઆ͢Δ

    View full-size slide

  14. Next.jsͷSSGͷ໰୊৭ʑ

    View full-size slide

  15. production / development
    • جຊతʹ production mode ͱ development mode Ͱ͸
    ఱͱ஍΄Ͳͷ͕ࠩ͋Δ͘Β͍ಈ͖͕ҟͳΔ
    • Next.js ͸ production mode ʹͳΔͱ੩తͳαΠτͰ͋
    Ε͹ࣗಈతʹ੩తͳ `html` ʹม׵͠ɺ React ͷαʔόα
    ΠυϨϯμϦϯάͷॲཧΛεΩοϓ͢Δ
    • develop mode ͷ৔߹͸ຖճϏϧυ͠ɺReactͷαʔό
    αΠυϨϯμϦϯά͕࣮ߦ͞ΕΔ

    View full-size slide

  16. Next.js automatic static site
    generation
    • Next.js Ͱ͸جຊతʹϏϧυ࣌ʹ੩తͳϖʔδΛ࡞Γ͕ͨΔɻ
    • `getInitialProps` ͱ͍͏ϝιου͕ page ίϯϙʔωϯτʹੜ
    ͍͑ͯΕ͹ಈతɺͦ͏͡Όͳ͔ͬͨΒ੩తͳϖʔδͱΈͳ͢ɻ
    • ੩తͳϖʔδͰ͋Ε͹ɺ build ࣌ʹ html Λ੒Ռ෺ͱͯ͠࡞ͬ
    ͯ͠·͍ɺҎޙϦΫΤετ͕དྷͨΒͦΕ͔͠ฦ͞ͳ͍ɻ
    • ಈతͳϖʔδʹͳΔͱຖճ React ͷ renderToString ͕૸Δͷ
    Ͱෛՙ͸͔͔Δɻ

    View full-size slide

  17. Next.js automatic static site
    generation
    • Next.js Ͱ͸جຊతʹϏϧυ࣌ʹ੩తͳϖʔδΛ࡞Γ͕ͨΔɻ
    • `getInitialProps` ͱ͍͏ϝιου͕ page ίϯϙʔωϯτʹੜ
    ͍͑ͯΕ͹ಈతɺͦ͏͡Όͳ͔ͬͨΒ੩తͳϖʔδͱΈͳ͢ɻ
    • ੩తͳϖʔδͰ͋Ε͹ɺ build ࣌ʹ html Λ੒Ռ෺ͱͯ͠࡞ͬ
    ͯ͠·͍ɺҎޙϦΫΤετ͕དྷͨΒͦΕ͔͠ฦ͞ͳ͍ɻ
    • ಈతͳϖʔδʹͳΔͱຖճ React ͷ renderToString ͕૸Δͷ
    Ͱෛՙ͸͔͔Δɻ
    ͳΔ΂͘੩తʹ౗͍͕ͨ͠ɺجຊతʹ೉͍͠ͷ
    Ͱͦ͜·ͰؤுΔඞཁͳ͠ɻ

    View full-size slide

  18. ࠷ۙͩͱ
    • Next Generation Static Site Generation͕ೖͬͨ
    • `getStaticProps`, `getStaticPaths` Ͱʮbuild࣌ʹAPI͔
    Βpropsऔ͖ͬͯͯ HTML ʹ͢Δʯͱ͔΋Ͱ͖Δ

    View full-size slide

  19. ͨͩ͠
    • جຊతʹ͸੩తϖʔδʹ͍ͨ͠ͱͯ͠΋ɺׂͱࠓ࣌఺
    Ͱ͸೉͍͠ɻ
    • (Ϗϧυ࣌ʹͨ͘͞Μ͋ΔϖʔδΛશ෦Ұؾʹ࡞Δͬͯ
    ϏϧυαʔόͷϦιʔεͲ͏ݟੵ΋Ε͹…)
    • StyledComponentsͳͲɺSSRͷϦΫΤετΛى఺ʹ
    ಈ͘΋ͷ͕ଟ͘ɺ·ͩ੩తϏϧυʹ͸࢖͑ͳ͔ͬͨΓ
    ͢Δɻ

    View full-size slide

  20. ͨͩ͠
    • جຊతʹ͸੩తϖʔδʹ͍ͨ͠ͱͯ͠΋ɺׂͱࠓ࣌఺
    Ͱ͸೉͍͠ɻ
    • (Ϗϧυ࣌ʹͨ͘͞Μ͋ΔϖʔδΛશ෦Ұؾʹ࡞Δͬͯ
    ϏϧυαʔόͷϦιʔεͲ͏ݟੵ΋Ε͹…)
    • StyledComponentsͳͲɺSSRͷϦΫΤετΛى఺ʹ
    ಈ͘΋ͷ͕ଟ͘ɺ·ͩ੩తϏϧυʹ͸࢖͑ͳ͔ͬͨΓ
    ͢Δɻ

    View full-size slide

  21. Next.js x AMPͷ໰୊৭ʑ

    View full-size slide

  22. AMP Validator
    • Next.js ։ൃ࣌ɺதͰ AMP ͷ Validator ͕ৗʹಈ͘ɻ
    • ։ൃதʹ AMP invalid ͳঢ়ଶʹͳͬͨΒౖΒΕΔ
    • զʑͷΞϓϦέʔγϣϯͰ͸Ұ୴ AMP invalid ͳঢ়ଶʹͨ͠
    ͔ͬͨͷͰɺ invalid ͩͱৗʹౖΒΕଓ͚Δɻ
    • ൥Θ͔ͬͨ͠ͷͰɺValidator ΧελϚΠζͰ͖ΔΑ͏ʹͨ͠ɻ
    • https://github.com/zeit/next.js/pull/9191

    View full-size slide

  23. AMP Optimizer
    • Next.js ͷ production mode Ͱ͸ AMP
    Optimizer ͕SSRதʹຖճඞ࣮ͣߦ͞ΕΔɻ
    • ͔ͳΓॏ͍ॲཧͳͷͰɺຖճ࣮ߦ͢Δ΋ΜͰ͸
    ͳ͍ɻ
    • SSR͕ॏ͍ॲཧ x AMP Optimizer ΋ॏ͍ॲཧ =
    Ϋιॏ͍

    View full-size slide

  24. AMP Optimizer
    • AMPϖʔδͷϨϯμϦϯάΛߴ଎Խ͢Δεά
    ϨϞϊ
    • ࣗಈతʹresourceͷpreloadͱ͔ͯ͘͠ΕΔ

    View full-size slide

  25. AMP Optimizer
    • Next.js ͷ production mode Ͱ͸ AMP
    Optimizer ͕SSRதʹຖճඞ࣮ͣߦ͞ΕΔɻ
    • ͔ͳΓॏ͍ॲཧͳͷͰɺຖճ࣮ߦ͢Δ΋ΜͰ͸
    ͳ͍ɻ
    • SSR͕ॏ͍ॲཧ x AMP Optimizer ΋ॏ͍ॲཧ =
    Ϋιॏ͍

    View full-size slide

  26. AMP Optimizer

    ͭ·Δͱ͜ΖɺCDNͰΩϟογϡ͞ΕΔͷલఏ
    ͷॲཧΛຖճ΍ͬͯ͠·͏ͷͰɺݫ͍͠

    View full-size slide

  27. AMP Optimizer
    • ͳͷͰɺ͜Ε΋ΧελϚΠζͰ͖ΔΑ͏ʹPR
    Λग़ͨ͠ɻ
    • https://github.com/zeit/next.js/pull/10705

    View full-size slide

  28. Next.js x AMP ·ͱΊ

    View full-size slide

  29. ଞʹ΋৭ʑ
    • AMPͰϕετϓϥΫςΟεͷείΞ͕௿͍໰୊
    • मਖ਼ͨ͠: https://github.com/ampproject/
    amphtml/pull/26876
    • TypeScript ͷܕ͕ͳ͍ͱ͔
    • ී௨ʹࠓݱ࣌఺Ͱෆ۩߹͕ى͖ͯΔΑʂʂʂʂ

    View full-size slide

  30. ·ͱΊ
    • Next.js x AMP ݁ߏେม͕ͩɺத਎Λ஌্ͬͨͰOSSʹ
    ίϯτϦϏϡʔτ͍ͯ͘͜͠ͱͰमਖ਼͠ͳ͕Βઓ͍ͬͯ
    Δɻ
    • ͜͏͍͏Τοδͳ΋ͷʹ௅ઓ͢Δ৔߹ɺੈքʹ·ͩͳ͍
    ໰୊ʹͿͪ౰ͨΔ͜ͱʹͳΔɻ
    • ੈքʹ·ͩͳ͍໰୊͸ܦݧ஋Λ্͛Δ֨޷ͷػձɺOSS
    ʹߩݙ͢Δ͜ͱͰੈքΛ1mmྑ͘͢Δ͜ͱ͕Ͱ͖Δɻ

    View full-size slide