Setup Vercel to Deploy an Nx Based Next.js Application
When you develop a Next.js based application, Vercel is probably the preferred way of deploying the site (although not the only option you have). In this lesson, we're going to have a look at how to set up a Vercel deployment for our developer portfolio site.
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] To deploy our portfolio site, we have two options. We can either use the export command, which is already baked into this target here of our generated Next.js application. It's especially useful if you want to generate a set of static files to host on any provider.
[0:16] If you want to host it on Vercel, for instance, then you might just use the build target. We can just use Nx build site. We might want to pass the production flag, which you can do by either passing the --prod, or --configuration=production. What this would do is use the configuration production here, which would, internally, also set a couple of Node flags in a different way.
[0:39] Obviously, right now, here this production configuration is empty. You could open this up and configure different options in here.
[0:48] Running a production build, again, produces on the output path, which is in this case, is this app site, our production bundle to be deployed to Vercel. If we go up here in the disc folder, you can see here the public, you can see that .next file, which contains useful information for Vercel to host our website, as well as the next.config and package.json. There is no exported folder, as we have seen with the export command, because that one is only useful for statically hosting it.
[1:15] To deploy to Vercel, let's go over to vercel.com dashboard. Then, you create a new project there. We can import a project from git. In my case, I'll use the blog series repository which I have created. If we hit that Import, it will open up the configuration page.
[1:33] You can optionally create a team, especially if you plan to work in a bigger team within a corporate environment. Otherwise, you can continue and skip that step, and configure the project straight away.
[1:43] In our case the project name is blog-series-nextjs-nx. We can leave it as is. The thing we want to customize is, here, the build output settings. We want to override the command here to use the actual nx command, which will be, npx nx build site, which is the name of our application, in configuration mode, production.
[2:02] We also want to override the actual output directory, which as we have seen, would be dist/app/site, and then the .next directory. We can specify the very same here. With that, we are ready to go, so you can hit the Deploy button.
[2:17] Once the build succeeds, you will get redirected to the main Vercel page of your dashboard. If we click here, we see the current production deployment. Hitting this URL here opens up the deployed block. By default, Vercel creates deployments from your main branch, which is either main or master, depending on how you configured it.
[2:49] However, if you go to Deployments, it will also show up so-called preview deployments, which means, whenever you create a PR on your connected GitHub repository, it will run a so-called pre-deployment for what it would look like to deploy these changes into your main production line.
[3:05] This is a really useful feature. Let's have a look. If we go to our own repository and create a new branch, test-vercel-deployment, and let's go into our article and actually create here some new text, "Hello, egghead folks." Let's add this to our comments.
[3:27] Now, let's create a new PR to our GitHub repository. This will open up our GitHub repository. Let's create a new pull request. Once that launches, you already see that Vercel bot kicking in here, which should soon, here, post a new comment on that pull request. This comment now shows us that there is a deployment in progress.
[3:55] In fact, if we go over to the blog series Vercel deployments page, we can see there, a new deployment is currently running. Once the deployment is successful, we can see here the Visit button. We can either just use this temporary URL, or you can see it has such a unique identifier of the build.
[4:12] Also, if we go back to our actual pull request, we see now the Preview button here, or the Preview line, does no more show, "Build in progress," but rather, it shows us the URL. We can just hit that one and it will open up, again, our temporary preview deployment, which obviously also has, for instance, our article's dynamic routing.