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

AWS Amplify Serverless Framework Next.js Deploy

Avatar for leebyonghun 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

Avatar for leebyonghun

leebyonghun

November 18, 2020
Tweet

More Decks by leebyonghun

See All by leebyonghun
Amplify CI/CD
Avatar for leebyonghun leebyonghun
1
1.9k

Other Decks in Programming

See All in Programming
AIともっと楽するE2Eテスト
Avatar for Yohei Maeda myohei
8
3k
Azure AI Foundryではじめてのマルチエージェントワークフロー
Avatar for 瀬尾佳隆 seosoft
0
200
新メンバーも今日から大活躍！SREが支えるスケールし続ける組織のオンボーディング
Avatar for HonMarkHunt honmarkhunt
5
8.6k
The Niche of CDK Grant オブジェクトって何者？/the-niche-of-cdk-what-isgrant-object
Avatar for hassaku63 hassaku63
1
590
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
Avatar for Chiaki Okamoto chiilog
1
280
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
Avatar for Aki Nakahara akinko_0915
0
140
マッチングアプリにおけるフリックUIで苦労したこと
Avatar for yuhei yuheiito
0
180
iOS 26にアップデートすると実機でのHot Reloadができない？
Avatar for Aoi Umigishi umigishiaoi
0
140
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
Avatar for Shohei Okada okashoi
1
290
なぜ「共通化」を考え、失敗を繰り返すのか
Avatar for Rinchoku rinchoku
1
680
A full stack side project webapp all in Kotlin (KotlinConf 2025)
Avatar for Dan Kim dankim
0
140
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
Avatar for 武田 憲太郎 kentaroutakeda
2
1k

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
189
11k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.8k
It's Worth the Effort
Avatar for 3n 3n
185
28k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
700
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
21
1.3k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.1k

Transcript

  1. ੗ӝࣗѐ 2020֙ 4ਘ Classmethod ੑࢎ ೠҴীࢲ Ӕޖ ઺ ઱۽ ೐ۿ౟ূ٘,

    ࢲߡܻझ ଃী ҙब

  2. ݾର - SPAীࢲ੄ SSR - SEO - Rendering - Next.js

    - Demo - ࢲߡܻझ ߓನ - AWS Amplify - Serverless Framework

  3. SPAীࢲ SSRਸ ৵?

  4. SEO

  5. Googlebot Rendering on the Web: Performance Implications of Application Architecture

    (Google I/O ’19) ୭न JSܳ ૑ਗೞৈࢲ CSRਸ ࢎਊೞח SPAب оמ

  6. Google Search Console https://search.google.com/search-console/welcome URL Inspection Toolਸ ࢎਊ೧ࢲ पઁ ੜ

    ੘زغҊ ੓ח૑ ഛੋ

  7. ఋ Ѩ࢝ূ૓੄ SEO https://searchadvisor.naver.com/guide/seo-advanced-javascript ఋ Ѩ࢝ূ૓ٜ਷ ই૒ SPAܳ ৮੹൤ ૑ਗೞҊ

    ੓૑ח ঋ਺

  8. Ҵղ Ѩ࢝ূ૓ ࠺ਯ https://gs.statcounter.com/search-engine-market-share/all/south-korea http://www.internettrend.co.kr/trendForward.tsp Ҵղীࢲ੄ ݽٚ ࢲ࠺झী ؀ೠ Ѩ࢝ূ૓

    ࠺ਯ Ҵղীࢲ੄ Ҵղ ࢲ࠺झী ؀ೠ Ѩ࢝ূ૓ ࠺ਯ

  9. Googleীࢲ੄ ֢୹݅ ೙ਃೞ׮ݶ CSRੋ SPAܳ ࢎਊ೧ب оמ ׮ܲ Ѩ࢝ূ૓ীࢲ੄ ֢୹ب

    Ҋ۰ೠ׮ݶ SSRਸ ࢎਊೞৈ SEO ೱ࢚

  10. Rendering

  11. Rendering on the Web: Performance Implications of Application Architecture (Google

    I/O ’19) ੉࢚੸ੋ ۪؊݂ SSR, CSR݅ ࢎਊೞח Ѫ੉ ইפۄ ಕ੉૑ী য਎ܻח ۪؊݂੉ ೙ਃ

  12. ۪؊݂ ߹ ର੉ https://developers.google.com/web/updates/2019/02/rendering-on-the-web

  13. ۪؊݂ ߹ ର੉ https://developers.google.com/web/updates/2019/02/rendering-on-the-web

  14. Next.js React ੗୓੸ਵ۽ب SSR੉ оמೞ૑݅ SSR, Hydration, Pre-renderingਸ ખ ؊

    औѱೞӝ ਤ೧ Next.jsܳ ࢎਊ

  15. Demo

  16. AWSীࢲ SPA੄ SSRਸ ࢲߡܻझ۽ যڌѱ?

  17. AWS Amplify৬ Serverless Framework

  18. যڃ ഋక۽ ߓನ غ঻ਸөਃ?

  19. ইఃఫ୊

  20. Next.js জ ࢤࢿ ߂ Amplify ࢤࢿ Next.js ೐۽ં౟ ࢤࢿ Next.js

    ೐۽ં౟ী Amplify ୶о npm install aws-amplify @aws-amplify/ui-react ೐۽ં౟ী was-amplify ୶о

  21. API ୶о Amplify cli۽ API ୶о झః݃ ੘ࢿ

  22. Amplifyী ݅ٚ APIܳ AWSী ಹए, ੘ࢿೠ झః݃۽ ௏٘о ੗زࢤࢿ ؽ

    src/graphql/

  23. nextjsaws: component: “@sls-next/[email protected]" ࢲߡܻझ ೐ۨ੔ਕ௼۽ ߓನ మ೒݁ ࢤࢿ serverless.yml ౵ੌ੄

    ղਊਸ ׮ ૑਍ റ ਤ ௏٘ ੘ࢿ ߓನ ઺

  24. Ѿҗ ഛੋ

  25. ੉റ Gtihub Actions ١ਸ ࢎਊೞৈ CI/CD ө૑ ࢸ੿೧فݶ ݒ਋ рಞ

  26. ଵҊ 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

  27. хࢎ೤פ׮