Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AWS Amplify Serverless Framework Next.js Deploy
Search
leebyonghun
November 18, 2020
Programming
1
1.4k
AWS Amplify Serverless Framework Next.js Deploy
Deploy Next.js for making serverless application by AWS Amplify and Serverless Framework
leebyonghun
November 18, 2020
Tweet
Share
More Decks by leebyonghun
See All by leebyonghun
Amplify CI/CD
leebyonghun
1
1.9k
Other Decks in Programming
See All in Programming
Graviton と Nitro と私
maroon1st
0
140
tparseでgo testの出力を見やすくする
utgwkk
2
290
re:Invent 2025 トレンドからみる製品開発への AI Agent 活用
yoskoh
0
440
開発に寄りそう自動テストの実現
goyoki
2
1.4k
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
codenote
0
300
The Art of Re-Architecture - Droidcon India 2025
siddroid
0
130
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
drumath2237
1
190
AIエージェントの設計で注意するべきポイント6選
har1101
5
2.4k
AI時代を生き抜く 新卒エンジニアの生きる道
coconala_engineer
1
440
perlをWebAssembly上で動かすと何が嬉しいの??? / Where does Perl-on-Wasm actually make sense?
mackee
0
150
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
bengo4com
0
190
Tinkerbellから学ぶ、Podで DHCPをリッスンする手法
tomokon
0
140
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.7k
Color Theory Basics | Prateek | Gurzu
gurzu
0
150
The untapped power of vector embeddings
frankvandijk
1
1.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
KATA
mclloyd
PRO
33
15k
Building Applications with DynamoDB
mza
96
6.8k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.1k
Building the Perfect Custom Keyboard
takai
1
660
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
200
Agile that works and the tools we love
rasmusluckow
331
21k
AI: The stuff that nobody shows you
jnunemaker
PRO
1
24
Art, The Web, and Tiny UX
lynnandtonic
304
21k
Transcript
ӝࣗѐ 2020֙ 4ਘ Classmethod ੑࢎ ೠҴীࢲ Ӕޖ ۽ ۿূ٘,
ࢲߡܻझ ଃী ҙब
ݾର - SPAীࢲ SSR - SEO - Rendering - Next.js
- Demo - ࢲߡܻझ ߓನ - AWS Amplify - Serverless Framework
SPAীࢲ SSRਸ ৵?
SEO
Googlebot Rendering on the Web: Performance Implications of Application Architecture
(Google I/O ’19) ୭न JSܳ ਗೞৈࢲ CSRਸ ࢎਊೞח SPAب оמ
Google Search Console https://search.google.com/search-console/welcome URL Inspection Toolਸ ࢎਊ೧ࢲ पઁ ੜ
زغҊ ח ഛੋ
ఋ Ѩ࢝ূ SEO https://searchadvisor.naver.com/guide/seo-advanced-javascript ఋ Ѩ࢝ূٜ ই SPAܳ ৮ ਗೞҊ
ח ঋ
Ҵղ Ѩ࢝ূ ࠺ਯ https://gs.statcounter.com/search-engine-market-share/all/south-korea http://www.internettrend.co.kr/trendForward.tsp Ҵղীࢲ ݽٚ ࢲ࠺झী ೠ Ѩ࢝ূ
࠺ਯ Ҵղীࢲ Ҵղ ࢲ࠺झী ೠ Ѩ࢝ূ ࠺ਯ
Googleীࢲ ֢݅ ਃೞݶ CSRੋ SPAܳ ࢎਊ೧ب оמ ܲ Ѩ࢝ূীࢲ ֢ب
Ҋ۰ೠݶ SSRਸ ࢎਊೞৈ SEO ೱ࢚
Rendering
Rendering on the Web: Performance Implications of Application Architecture (Google
I/O ’19) ࢚ੋ ۪؊݂ SSR, CSR݅ ࢎਊೞח Ѫ ইפۄ ಕী যܻח ۪؊݂ ਃ
۪؊݂ ߹ ର https://developers.google.com/web/updates/2019/02/rendering-on-the-web
۪؊݂ ߹ ର https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Next.js React ਵ۽ب SSR оמೞ݅ SSR, Hydration, Pre-renderingਸ ખ ؊
औѱೞӝ ਤ೧ Next.jsܳ ࢎਊ
Demo
AWSীࢲ SPA SSRਸ ࢲߡܻझ۽ যڌѱ?
AWS Amplify৬ Serverless Framework
যڃ ഋక۽ ߓನ غਸөਃ?
ইఃఫ
Next.js জ ࢤࢿ ߂ Amplify ࢤࢿ Next.js ۽ં ࢤࢿ Next.js
۽ંী Amplify ୶о npm install aws-amplify @aws-amplify/ui-react ۽ંী was-amplify ୶о
API ୶о Amplify cli۽ API ୶о झః݃ ࢿ
Amplifyী ݅ٚ APIܳ AWSী ಹए, ࢿೠ झః݃۽ ٘о زࢤࢿ ؽ
src/graphql/
nextjsaws: component: “@sls-next/
[email protected]
" ࢲߡܻझ ۨਕ۽ ߓನ మ݁ ࢤࢿ serverless.yml ੌ
ղਊਸ റ ਤ ٘ ࢿ ߓನ
Ѿҗ ഛੋ
റ Gtihub Actions ١ਸ ࢎਊೞৈ CI/CD ө ࢸ೧فݶ ݒ рಞ
ଵҊ https://youtu.be/k-A2VfuUROg AWS Amplify Next.js ౚషܻ https://docs.amplify.aws/start/getting-started/data-model/q/integration/next#api-with-server-side-rendering-ssr https://tinyurl.com/y43q9rjx
хࢎפ