How to Deploy a Next.js 13 Website with SSR & SSG to AWS Amplify
How to Deploy a Next.js 13 Website with SSR & SSG to AWS Amplify
Learn how to deploy a Next.js 13 website to AWS Amplify and test that Server Side Rendering and Static Site Generation features are working.
00:00 Intro
00:05 What to Expect
00:25 Setup a Next.js Project
00:40 Setup Tailwind
01:10 Install a Date Library
01:27 Create a Server Rendered Page
02:54 Create a Statically Generated Page
03:47 Deploy to AWS Amplify
04:40 Compare SSR vs SSG Pages
05:10 Outro
More Resources:
Next.js on AWS Amplify Hosting: https://aws.amazon.com/blogs/mobile/a…
Getting Started with Amplify: https://docs.amplify.aws/start/q/inte…
#Next #Nextjs #aws #amplify
Content
0.24 -> hey here's how to deploy a next.js
3.6 -> setting up to AWS amplifier by the time
6.54 -> you're done watching you'll be able to
8.34 -> set up a next setting project with
10.32 -> tailwind and add a seller side rendered
13.44 -> and a statically generated page to it
16.139 -> then you'll see how to deploy the
18.84 -> projects to AWS amplifier and see that
22.08 -> all of the summer rendering and static
24.24 -> features are working
25.98 -> let's start with in next.js project in
29.4 -> your terminal run npx create next up
32.22 -> then CD into the projects directory and
35.579 -> open it with your default code Editor to
38.16 -> confirm that the installation was
39.899 -> successful
41.16 -> but still went to the mix
43.32 -> install Tailwind CSS post CSS and the
47.1 -> auto prefixer then run towwind CSS in it
50.46 -> to add the Tailwind config file open the
53.46 -> Tailwind config file at the root of your
55.5 -> project and configure it to process
58.14 -> every JavaScript and typescript files in
61.26 -> your pages and components folder open
64.019 -> the globals.css file from the Styles
66.78 -> folder and import all of Tailwind CSS
69.9 -> now to show the difference between
72.299 -> server side rendering and static
74.7 -> generation we can use a dead library to
77.58 -> format and show the date the page was
79.799 -> last saved
81.119 -> you can use this FNS for this so install
84.18 -> it by running npm install datefns
87.6 -> like I mentioned earlier we need a
90.24 -> server rendered page and the start
91.979 -> generated page let's start with
94.56 -> discovering that page
96.6 -> bring up the index.js file in the pages
99.06 -> folder and create a get server-side
102.119 -> props function to fetch our data from
104.939 -> the fixed store API user's endpoint
107.72 -> convert the response to a Json object
110.52 -> and return test props
112.74 -> we can also attach an additional prop
115.38 -> which tells us when this page was
117.72 -> rendered
118.74 -> now we can use the data to render a list
121.619 -> of users create a home function
124.5 -> component which receives the data from
127.619 -> the get server side props function
129.5 -> render a heading which contains the
132.42 -> title of the page then render the user's
135 -> data to show the first name last name
137.879 -> email phone and City grab the time of
141.48 -> load prop which we sent from the get
143.459 -> server side props function
145.44 -> import format Trinity from date FNS
148.379 -> create a relative time between when the
151.14 -> page was generated from the server and
153.66 -> now since this is server side rendering
156.48 -> the get server side props function would
159.06 -> always be called so the difference is
161.34 -> going to be approximately instant
163.98 -> run npm run Dev in the terminal then
166.68 -> open the browser to see the rendered
168.84 -> cards
170.099 -> we'll get back to analyzing the time
172.2 -> after we've built and deployed to
174.48 -> production now I think it's time to add
176.819 -> an SSD page to go along with the SSR one
180.18 -> we've created
181.44 -> create an ssg.js file inside the pages
184.5 -> folder create a get static props
187.26 -> function and fetch a list of products in
189.959 -> it return the products as prop and just
192.599 -> like we did in the SSR page attach a
195.599 -> time of load prop to it
197.519 -> next create an SSD function component
200.58 -> which receives the product prop
203.22 -> render the head and also render the list
205.98 -> of products to show the product title
209.34 -> product description
211.319 -> and product price import format relative
214.92 -> and repeat the same thing we did in SSR
218.28 -> page to show the relative time between
220.319 -> when the page was sent from the server
222.42 -> and now head to the browser to confirm
225.659 -> that the products you are rendered
227.7 -> let's deploy the app to AWS amplifier
230.58 -> which gives us an opportunity to test
233.22 -> the time difference for SSR and SSG
236.879 -> the setup continuous delivery to amplify
239.459 -> hosting
240.659 -> stage and commit the project to get then
243.84 -> create a repository and push to GitHub
246.299 -> login to your AWS console and search for
249.599 -> amplify
251.22 -> select it from the list of services
253.22 -> click on the new app drop down and
256.199 -> select host web app
258.239 -> select a git provider and click the
260.76 -> continue button to connect your
262.32 -> Repository
263.52 -> select the repository you want to host
265.56 -> select the main branch and click the
268.08 -> next button now review your settings and
271.02 -> click the save and deploy button to
273.06 -> start the deployment process
275.34 -> then you can just relax and wait for
277.5 -> amplifier to deploy the website
280.8 -> once it's done click the live link to
283.919 -> preview and test
285.72 -> you can see that the SSR page always
288.6 -> matches my computer time because when
291.479 -> you refresh the page the gets our site
293.759 -> props function is always called
296.28 -> in contrast the get static props
298.86 -> function on the SSG page is called only
301.8 -> when the page was built so the time
305.04 -> still says 219 even when my computer
308.28 -> time is 221.
310.74 -> I've got some more resources for you in
313.259 -> the description if you want to dig
314.88 -> further into what you've learned today
317.04 -> thank you for watching see you soon
Source: https://www.youtube.com/watch?v=5045cvJit04