Deploy a New Website in Minutes with Next.js and Vercel

Introduction

Deploying a Next.js site to Vercel is quick and easy, and a great way to start a new project website for free. By creating an automated deployment pipeline, it is easier to focus on what matters: writing code, and getting your site off the ground, not worrying about manually pushing new versions to production.

In this post we will go step-by-step on how to start a new Next.js project and quickly deploy to Vercel for free.

What is Next.js

Next.js is a React framework that makes creating web applications quick and easy. Next.js comes with configurations and tools to make an application highly responsive and optimized for high performance. For instance, it natively includes intuitive page routing, server-side rendering, and data fetching. Think of it as an all-in-one web app framework, with your UI, API and content all living in the same space.

As a framework, Next.js is highly flexible and extendable. Using React for the UI components, you can mix and match or alter the different features and configurations to fit your project goals.

Next.js is designed to be fast. It is quick to start, with batteries included. And it is also optimized to render quickly to improve user experience.

Starting a new Next.js project

Let's start a new project to see how easy it is. This requires that you have at least Node.js 10.13 or later installed, but I would recommend Node.js 14.6.0 or later.

Open up your terminal, navigate to the directory you would like to create the new project in, and run the command:

npx create-next-app@latest nextjs_myblog --use-npm --example blog-starter

Now let's break down what this command is doing.

npx: run a npm package binary without having to install it locally or globaly.

create-next-app@latest nextjs_myblog: use the create-next-app package to bootstrap a new project named “nextjs_myblog” in the current directory.

--use-npm: an option for create-next-app to explictly use npm to bootstrap the project.

--example blog-starter: another option for create-next-app which makes it very flexible and extendable, we can bootstrap an example template repo on top of our base application. There are dozens of officially supported and maintained examples we can use on the Next.js repo. We’ll choose blog-starter for our example project.

There are a few more options we can use to modify our new application with create-next-app. You can find these options in the official documentation, by using the --help command, or by using the interactive CLI wizard to bootstrap a new project instead.

Now in just a few seconds, our new Next.js application will be built. Once the bootstrapping completes, we'll see a new nextjs_myblog directory in our current directory.

Now let's see if our project was setup correctly. Open the new project directory:

cd nextjs_myblog

Now we can run the following to start the development server:

npm run dev

This will start serving our development web app on port 3000.

Open http://localhost:3000/ in your browser to see if the app is working.

Success! 🎉

Deploy to Vercel for free

Vercel is a cloud platform especially tailored towards developers who want to ship their code as quickly as possible. They use Git repository-based continuous deployment architecture, which automatically deploys code when new Git commits are pushed to a connect repo.

Vercel is also the official maintainer of Next.js. That means that their native integration with the framework is seamless and requires zero-configuration. They also offer free hosting for personal and non-commercial projects.

Quick and free hosting, that’s a win-win.

Setup a new Git Repository

Let's now setup our project to deploy on Vercel. We will need to connect a GitHub repo to Vercel (you can also use a repo hosted on GitLab or Bitbucket if you’d like).

Let's setup up Git in our new project. Use the following command to initialize a new Git repo in our project folder:

git init

The create-next-app added an initial commit for us on bootstrapping, so at the moment there is nothing new to commit.

Now let's push this new repo to GitHub. Create a new repository in your GitHub account with the same project name “nextjs_myblog”.

Follow the directions given to import your local repository, namely:

git remote add origin git@github.com:YOUR_USERNAME/nextjs_myblog.git
git branch -M main

Push your local commits to your new GitHub remote repo:

git push -u origin main

Now our project is hosted on GitHub.

Connect the Git Repository to Vercel

Now we'll connect our new repo on GitHub to Vercel. If you do not already have an account, we can sign up using your GitHub account.

Go to the Sign Up page, and choose Continue with GitHub. Follow the prompt to allow the Vercel app to access your GitHub account. (Note: You can adjust GitHub App Permissions in your account settings to limit the Vercel app’s access to only specific repositories.)

Now that Vercel can see your GitHub repositories, use the Import Git Repository prompt and Import the project “nextjs_myblog”.

We don't need to adjust build setting or add any environment variables, so we'll just click on deploy.

Our project will now take a few seconds to build and deploy to a new URL with automatic SSL hosted on Vercel. Once it does, we will see the next screen and can navigate to the new live site.

Great job! You just deployed your first Next.js site! 🔥

Automated deployment

With the continuous deployment pipeline now setup with Vercel, shipping new changes to our production site is as simple as pushing commits to GitHub. With Vercel’s integration, it will automatically attempt to build new Git pushes to the main branch, and deploy the new changes to the live website.

This post scratches just the surface of using CI/CD with Vercel, and it is worth learning more about the other features included in Vercel's Git integration (like automatic previews on every branch push).

Conclusion

In just a few minutes we created a fully functional Next.js website and deployed it with included SSL on Vercel with no additional coding or fiddling with configuration. This demonstrates how easy and quick it is to start using Next.js with Vercel cloud hosting.

In a future post, I will cover some of the basics of how to start customizing your new Next.js project.

References

Learn more about Next.js with their official free online course

Learn more about Vercel using their documentation