nextjs_x_AMP.pdf - Speaker Deck

nextjs_x_AMP.pdf

by Yosuke Furukawa

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

AMP Examples

Slide 6

Slide 6 text

AMP Examples ׂͱԿͰ΋͋ΔͷͰɺ   AMP͚ͩͰ΋͍Ζ͍Ζ࡞ΕΔɻ

Slide 7

Slide 7 text

Now ෆ۩߹ରԠத….

Slide 8

Slide 8 text

Next.js supports AMP on v8.1

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

AMP͸࢖͏͚Ͳɺ AMP Cache ͸࢖Θͳ͍ͱ͍ ͏͔ͳΓಛघͳঢ়گ

Slide 12

Slide 12 text

Next.js x AMP // ͪͳΈʹɺ΍Δ͚ͩͳΒ௒؆୯ // pages/index.js function HomePage() { return

Welcome to AMP + Next.js.

} export default withAmp(HomePage)

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Next.jsͷSSGͷ໰୊৭ʑ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Next.js x AMPͷ໰୊৭ʑ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Next.js x AMP ·ͱΊ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

·ͱΊ

Slide 31

Slide 31 text

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