Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
nextjs_x_AMP.pdf
Search
Yosuke Furukawa
PRO
April 15, 2020
Programming
3
10k
nextjs_x_AMP.pdf
PWA Night で発表した Next.js x AMP の話です。
Yosuke Furukawa
PRO
April 15, 2020
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
3.9k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
240
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Other Decks in Programming
See All in Programming
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
What's new in AppKit on macOS 26
1024jp
0
170
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
970
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
140
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
220
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
120
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
490
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.7k
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Raft: Consensus for Rubyists
vanstee
140
7k
Building Adaptive Systems
keathley
43
2.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Faster Mobile Websites
deanohume
308
31k
Thoughts on Productivity
jonyablonski
69
4.7k
A better future with KSS
kneath
238
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Transcript
Next.js x AMP 2020/04/14 @ PWA Night LT
Twitter: @yosuke_furukawa Github: yosuke-furukawa
Next.js is … • a React framework • powered by
zeit
AMP is … • Accelerated Mobile Pages • AMPͷϧʔϧʹ४ڌͨ͠ΣϒϖʔδΛ࡞Δ͜ͱͰɺ AMP
cache ͱݺΕΔαʔό͔ΒΣϒϖʔδΛ৴ͯ͘͠ΕΔ • AMP ͷϧʔϧ amp-validator ͱݺΕΔνΣοΫπʔϧ͕ νΣοΫ͢Δɻ͜ΕΛ pass ͠ͳ͍ͱ AMP CacheʹΒͳ͍ɻ • AMPͷλά amp-* Ͱ࢝·Δ webcomponent ͷλά܈͕͋ ΓɺͦΕΒΛ͏͜ͱͰϦονͳΛ࡞ΕΔΑ͏ʹͳΔɻ
AMP Examples
AMP Examples ׂͱԿͰ͋ΔͷͰɺ AMP͚ͩͰ͍Ζ͍Ζ࡞ΕΔɻ
Now ෆ۩߹ରԠத….
Next.js supports AMP on v8.1
Next.js supports AMP on v8.1 ྆ऀ͕ձ߹ͨ͠ॠؒ
ҰݸΞϓϦΛ࡞ͬͯΈͨͷͰײΛڞ༗͍ͨ͠
AMP͏͚Ͳɺ AMP Cache Θͳ͍ͱ͍ ͏͔ͳΓಛघͳঢ়گ
Next.js x AMP // ͪͳΈʹɺΔ͚ͩͳΒ؆୯ // pages/index.js function HomePage() {
return <p>Welcome to AMP + Next.js.</p> } export default withAmp(HomePage)
Next.js x AMP inside • Next.js AMP ྑ͘ѱ͘தͰͬͯΔ͜ͱ͕ Ӆṭ͞Ε͍ͯΔ(ϑϨʔϜϫʔΫͱͯͨ͠Γલ)ɻ
• ҰํͰதͰͬͯΔ͜ͱ͕Θ͔Βͳ͍ڪා͋Δ ͱࢥ͏ • தͰͬͯΔ͜ͱશ෦Λ͑Δͷ͍͠ͷͰɺ AMPɺNext.jsͱʹ͔͍ͭ·ΜͰղઆ͢Δ
Next.jsͷSSGͷ৭ʑ
production / development • جຊతʹ production mode ͱ development mode
Ͱ ఱͱ΄Ͳͷ͕ࠩ͋Δ͘Β͍ಈ͖͕ҟͳΔ • Next.js production mode ʹͳΔͱ੩తͳαΠτͰ͋ Εࣗಈతʹ੩తͳ `html` ʹม͠ɺ React ͷαʔόα ΠυϨϯμϦϯάͷॲཧΛεΩοϓ͢Δ • develop mode ͷ߹ຖճϏϧυ͠ɺReactͷαʔό αΠυϨϯμϦϯά͕࣮ߦ͞ΕΔ
Next.js automatic static site generation • Next.js ͰجຊతʹϏϧυ࣌ʹ੩తͳϖʔδΛ࡞Γ͕ͨΔɻ • `getInitialProps`
ͱ͍͏ϝιου͕ page ίϯϙʔωϯτʹੜ ͍͑ͯΕಈతɺͦ͏͡Όͳ͔ͬͨΒ੩తͳϖʔδͱΈͳ͢ɻ • ੩తͳϖʔδͰ͋Εɺ build ࣌ʹ html ΛՌͱͯ͠࡞ͬ ͯ͠·͍ɺҎޙϦΫΤετ͕དྷͨΒͦΕ͔͠ฦ͞ͳ͍ɻ • ಈతͳϖʔδʹͳΔͱຖճ React ͷ renderToString ͕Δͷ Ͱෛՙ͔͔Δɻ
Next.js automatic static site generation • Next.js ͰجຊతʹϏϧυ࣌ʹ੩తͳϖʔδΛ࡞Γ͕ͨΔɻ • `getInitialProps`
ͱ͍͏ϝιου͕ page ίϯϙʔωϯτʹੜ ͍͑ͯΕಈతɺͦ͏͡Όͳ͔ͬͨΒ੩తͳϖʔδͱΈͳ͢ɻ • ੩తͳϖʔδͰ͋Εɺ build ࣌ʹ html ΛՌͱͯ͠࡞ͬ ͯ͠·͍ɺҎޙϦΫΤετ͕དྷͨΒͦΕ͔͠ฦ͞ͳ͍ɻ • ಈతͳϖʔδʹͳΔͱຖճ React ͷ renderToString ͕Δͷ Ͱෛՙ͔͔Δɻ ͳΔ͘੩తʹ͍͕ͨ͠ɺجຊతʹ͍͠ͷ Ͱͦ͜·ͰؤுΔඞཁͳ͠ɻ
࠷ۙͩͱ • Next Generation Static Site Generation͕ೖͬͨ • `getStaticProps`, `getStaticPaths`
Ͱʮbuild࣌ʹAPI͔ Βpropsऔ͖ͬͯͯ HTML ʹ͢Δʯͱ͔Ͱ͖Δ
ͨͩ͠ • جຊతʹ੩తϖʔδʹ͍ͨ͠ͱͯ͠ɺׂͱࠓ࣌ Ͱ͍͠ɻ • (Ϗϧυ࣌ʹͨ͘͞Μ͋ΔϖʔδΛશ෦Ұؾʹ࡞Δͬͯ ϏϧυαʔόͷϦιʔεͲ͏ݟੵΕ…) • StyledComponentsͳͲɺSSRͷϦΫΤετΛىʹ ಈ͘ͷ͕ଟ͘ɺ·ͩ੩తϏϧυʹ͑ͳ͔ͬͨΓ
͢Δɻ
ͨͩ͠ • جຊతʹ੩తϖʔδʹ͍ͨ͠ͱͯ͠ɺׂͱࠓ࣌ Ͱ͍͠ɻ • (Ϗϧυ࣌ʹͨ͘͞Μ͋ΔϖʔδΛશ෦Ұؾʹ࡞Δͬͯ ϏϧυαʔόͷϦιʔεͲ͏ݟੵΕ…) • StyledComponentsͳͲɺSSRͷϦΫΤετΛىʹ ಈ͘ͷ͕ଟ͘ɺ·ͩ੩తϏϧυʹ͑ͳ͔ͬͨΓ
͢Δɻ
Next.js x AMPͷ৭ʑ
AMP Validator • Next.js ։ൃ࣌ɺதͰ AMP ͷ Validator ͕ৗʹಈ͘ɻ •
։ൃதʹ AMP invalid ͳঢ়ଶʹͳͬͨΒౖΒΕΔ • զʑͷΞϓϦέʔγϣϯͰҰ୴ AMP invalid ͳঢ়ଶʹͨ͠ ͔ͬͨͷͰɺ invalid ͩͱৗʹౖΒΕଓ͚Δɻ • Θ͔ͬͨ͠ͷͰɺValidator ΧελϚΠζͰ͖ΔΑ͏ʹͨ͠ɻ • https://github.com/zeit/next.js/pull/9191
AMP Optimizer • Next.js ͷ production mode Ͱ AMP Optimizer
͕SSRதʹຖճඞ࣮ͣߦ͞ΕΔɻ • ͔ͳΓॏ͍ॲཧͳͷͰɺຖճ࣮ߦ͢ΔΜͰ ͳ͍ɻ • SSR͕ॏ͍ॲཧ x AMP Optimizer ॏ͍ॲཧ = Ϋιॏ͍
AMP Optimizer • AMPϖʔδͷϨϯμϦϯάΛߴԽ͢Δεά ϨϞϊ • ࣗಈతʹresourceͷpreloadͱ͔ͯ͘͠ΕΔ
AMP Optimizer • Next.js ͷ production mode Ͱ AMP Optimizer
͕SSRதʹຖճඞ࣮ͣߦ͞ΕΔɻ • ͔ͳΓॏ͍ॲཧͳͷͰɺຖճ࣮ߦ͢ΔΜͰ ͳ͍ɻ • SSR͕ॏ͍ॲཧ x AMP Optimizer ॏ͍ॲཧ = Ϋιॏ͍
AMP Optimizer ͭ·Δͱ͜ΖɺCDNͰΩϟογϡ͞ΕΔͷલఏ ͷॲཧΛຖճͬͯ͠·͏ͷͰɺݫ͍͠
AMP Optimizer • ͳͷͰɺ͜ΕΧελϚΠζͰ͖ΔΑ͏ʹPR Λग़ͨ͠ɻ • https://github.com/zeit/next.js/pull/10705
Next.js x AMP ·ͱΊ
ଞʹ৭ʑ • AMPͰϕετϓϥΫςΟεͷείΞ͕͍ • मਖ਼ͨ͠: https://github.com/ampproject/ amphtml/pull/26876 • TypeScript ͷܕ͕ͳ͍ͱ͔
• ී௨ʹࠓݱ࣌Ͱෆ۩߹͕ى͖ͯΔΑʂʂʂʂ
·ͱΊ
·ͱΊ • Next.js x AMP ݁ߏେม͕ͩɺதΛ্ͬͨͰOSSʹ ίϯτϦϏϡʔτ͍ͯ͘͜͠ͱͰमਖ਼͠ͳ͕Βઓ͍ͬͯ Δɻ • ͜͏͍͏Τοδͳͷʹઓ͢Δ߹ɺੈքʹ·ͩͳ͍
ʹͿͪͨΔ͜ͱʹͳΔɻ • ੈքʹ·ͩͳ͍ܦݧΛ্͛Δ֨ͷػձɺOSS ʹߩݙ͢Δ͜ͱͰੈքΛ1mmྑ͘͢Δ͜ͱ͕Ͱ͖Δɻ