The video demonstrates deploying a Next.js application to Vercel, integrating a GitHub repository, and configuring environment variables. After a successful deployment, the developer tests the application's functionality but identifies a mixed content error with WebSocket connections, necessitating a future HTTPS configuration on AWS.
Length 7:59
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #vercel #next.js #deployment #cicd #github #aws #elasticsearch #https #web development #debugging
0:00 So next up, we're going to deploy our Next.js UI to 0:04 production. And to do this, we're gonna use Vercel, which is 0:08 the organization in charge of Next.js. 0:12 We're gonna use them to deploy our Next.js application as their managed 0:15 solution for Next.js deployment. 0:17 It's extremely easy and simple to set up, as well as it's 0:21 completely free. So let's go ahead and get started to quickly 0:25 deploy our application and also have a CI/CD pipeline. 0:29 So just like our back-end application, whenever we push commits to our UI, 0:33 they'll automatically be pushed and deployed in our production 0:37 environment. So make sure you go to vercel.com and 0:41 click Sign Up to sign up for a new account. 0:44 Go ahead and follow through all these steps to create a new account. 0:48 All right, so after signing up for your account, 0:50 you should be brought to a central 0:51 dashboard page where we now have the opportunity to connect our Git 0:55 repository, so we can start picking up commits and 0:59 building our application. Let's go ahead and connect with GitHub 1:03 to connect our account. This has automatically gone ahead and 1:07 authorized with my GitHub account, and now I'll look for my 1:10 repository. So in my case, this is Shoppy UI. 1:14 I'll go ahead and import this, and it automatically detects that this is 1:18 a Next.js project, so we'll keep the Next.js framework 1:22 preset here. 1:23 We can keep the root directory and all of these settings as is. 1:27 So for example, here we have the opportunity to override 1:31 the 1:31 build and install commands as well as the output directory. 1:35 However, by default, Next.js knows what these are, 1:38 so we'll just leave 1:39 the defaults as is. However, next up in environment variables, 1:43 we have the 1:43 opportunity to actually add our environment 1:46 variables that we know our UI needs, and we actually can do this easily
The rest of the transcript is for members.
Sign in 