Deploy a Next.js Application to Vercel with GitHub

Lee Robinson
InstructorLee Robinson
Share this video with your friends

Social Share Links

Send Tweet

Vercel combines the best developer experience with an obsessive focus on end-user performance. With Vercel, we can easily deploy our Next.js application to production in under a minute.

Instructor: [0:00] To deploy your Next.js application to production, you'll need to ensure that your package.json scripts has a build, and it starts script to tell Next.js how to prepare a production build. If you use CreateNext app, this is already set up, but if you did the manual installation like we did, previously, you'll need to ensure these are added.

[0:20] After those are added and you've pushed all your changes to GitHub, as you see in my browser on the right, you can simply take this URL and go to Vercel. Vercel is a very easy way to deploy Next.js applications. If I paste in my link here, I can follow a few different steps to set up a project inside of Vercel, and then easily deploy that to production.

[0:44] I have my project name. It automatically detects that it's a Next.js project. I'm going to want to add environment variables for everything that was defined in .env.local.

[0:57] Now that these values have been added and encrypted, we can click Deploy to deploy our application to production. You'll see on the left, it retains all of the project settings that we used, and on the right, we have a live-build output of our application.

[1:16] Just 40 seconds later, our application has been deployed, and we can click visit. You'll see it was initially loading. Then, we see the content coming from DynamoDB. That's all it takes to deploy our application to production.

[1:33] If we go back to our import tab, we can click open dashboard, which will take us to this newly created project inside of Vercel. We can verify inside of our settings that our environment variables were here and added correctly.

[1:49] You also can set up analytics, which will give you more information about the speed and performance of your application, view all your deployments and even more.

[1:59] For example, we can click View domains. We see the alias URL for our project, and that it's assigned to our git branch. If we want it, however, we could add in any domains here, and we can purchase them directly through Vercel. It's very easy to go from development to production.