Deploy your Next.js app on Vercel
Next.js can be deployed anywhere but an easy way to deploy is through Vercel, the creators of Next.js.
Vercel lets you use any rendering method on your pages right out of the box and lets you take advantage of their edge network that keeps your app blazingly fast.
You can follow along to deploy your own app at nikolovlazar/deploy-nextjs-on-vercel
Lazar Nikolov: [0:01] Welcome to the last lesson for this course. That is the deploy your Next.js app on Vercel. Technically, Next.js can be deployed anywhere, but the easiest way is to use the Vercel platform, which is created by the people who also created Next.js.
[0:18] Also, Vercel is optimized for Next.js. Out of the box, it applies the following optimizations to your app. Every page can either use Static Generation or Server-Side Rendering.
[0:28] Pages that use Static Generation and assets will automatically be served from Vercel's edge network, which is blazingly fast. Also pages that your Server-Side Rendering and API routes will automatically become isolated serverless functions.
[0:44] This allows page rendering and API request to scale infinitely. Before we begin, make sure you clone this repo, nikolovlazar/deploy-nextjs-on-vercel. This is a demo project that I created just for this purpose.
[0:59] Hit the fork button and make sure you have it in your account. Now, let's login. We're going to use GitHub as the login provider. Now, we're in to create a new project. Let's hit the New Project button.
[1:16] From our import git repository list, we can see the deploy Next.js on Vercel project. Let's hit "Import." As you can see, Vercel automatically detected that this project is a Next.js project. We can change the name if you'd like, but we're going to leave it as Deploy Next.js on Vercel.
[1:35] We can change the root directory in case the Next.js project that you're trying to deploy is not at the root. If we scroll down, we can see two sections. This is the build and output settings.
[1:45] For this project, we use the default settings. If your project has some specific build install and output directory settings, you can overwrite them here.
[1:57] Then, there's the environment variables section, where you can add environment variables that you use in your project. After you set up everything, just hit "Deploy." There we go, Vercel started the build process. This could take a minute.
[2:12] There we go, the project is deployed, and we're welcomed with an amazing congratulations page. If we click on the image, we can see our app deployed and live. That's how easy it is to deploy your Next.js app on Vercel.
Hello Dominic! Thank you! The color theme is "Bearded Theme Arc".
Hey Lazar, how are you? The course is amazing. I have one question. One of my env variables is the base url for the project, when i set the env variable for this on vercel , how would I know the value for the base url?
Absolutely loved this Lazar! So clear throughout. No skipping over steps leaving me feeling like something was magic. Quite an achievement given how magical nextjs & vercel actually are! Random observation: I love your increased line-spacing in vscode – adopted that straight away. Also, what vscode theme was that haha?