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
9
3.7k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
230
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
410
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
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
XP, Testing and ninja testing
m_seki
3
220
VS Code Update for GitHub Copilot
74th
2
590
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
630
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
180
Porting a visionOS App to Android XR
akkeylab
0
210
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
CursorはMCPを使った方が良いぞ
taigakono
1
220
5つのアンチパターンから学ぶLT設計
narihara
1
150
NPOでのDevinの活用
codeforeveryone
0
720
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Facilitating Awesome Meetings
lara
54
6.4k
The World Runs on Bad Software
bkeepers
PRO
69
11k
BBQ
matthewcrist
89
9.7k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Practical Orchestrator
shlominoach
188
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Balancing Empowerment & Direction
lara
1
400
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
RailsConf 2023
tenderlove
30
1.1k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
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ྑ͘͢Δ͜ͱ͕Ͱ͖Δɻ