Let's see how to deploy our Next.js app
to the Vercel platform.
Vercel is a so-called serverless solution,
meaning that
we don't need to think in terms of
how many servers we need to run our application,
what kind of servers, and so on.
We just deploy our project
and the platform manages everything automatically.
Vercel is free for personal projects,
or you can pay a monthly subscription
if you work on a team.
You can find the details in the Pricing page.
But like I said, you can use the free plan
to get started,
and the easiest way to sign in
is to connect it with our GitHub account,
or another Git provider if you like,
but I'll use GitHub.
Once you log in you'll see a dashboard page,
and I already have a couple of projects here,
but we want to create a new project
for our Blog website.
Now, the way Vercel works is that
we want to let it import our code
directly from a Git repository.
So Vercel will fetch our project
and deploy it automatically.
The beauty of this approach is that
whenever we push some updates to Git
Vercel will automatically deploy a new version
with the latest changes.
So we basically get
a "Continuous Deployment" pipeline.
But this does mean that
we first need to use Git in our project.
Now, in our "next-blog" folder
I already created a local repository.
If you have not been using Git in your project
you can initalise a repository with "git init"
and then do a "git commit".
But having a local repository is not enough,
to import it into Vercel we need to
share the repository
on a provider such as GitHub,
which is in fact what I'm going to use.
So what we want to do
is create a new repository
for our "next-blog" project.
We can make this repository "Private",
and then go ahead and create it.
Here we get some instructions on
how to set things up.
The first block shows you what you need to do
to initialise a new local Git repository first.
But I have an existing repository
so I'm going to copy this line,
and then go and run this command in my terminal.
This configures my local repository
to use GitHub as the "remote".
Next we need to "push" our code,
so run this "git push" command.
And this will upload our project
to the GitHub servers.
Note that you'll need an SSH key configured
in your GitHub account for this to work.
But once we've done a "git push"
we should see our code in GitHub,
You can see that we have
all our files and folders now.
So at this point we can go back to Vercel
and import that GitHub repository.
"next-blog" is the last one in this list.
If you don't see your repository here
you probably need to configure some permissions,
something you can do by clicking the
"Adjust GitHub App Permissions" link at the bottom.
Anyway, let's import our "next-blog" project.
On this page we can configure a few things,
like if we want to "Create a Team".
But I'm going to "Skip" that step,
because this project is a personal blog,
so I don't need other developers to access it.
Here we can configure the project name,
which framework it uses, and so on.
By the way, note that Vercel supports
not just Next.js but many other frameworks as well.
But Next.js is what we want in this case of course.
We can leave these options as the are
and click "Deploy".
This will fetch our source code,
then build our project and deploy it.
And now it's party time!
In just a few seconds our website has been deployed.
If we go to the Dashboard
we should see some more details.
Vercel automatically created
some domains for our website.
And you can also configure it to use
your own custom domain if you want to.
But for this example let's just use
this auto-generated domain name,
hosted under "vercel.app".
So here's our Blog website,
available on a public domain
where it can be viewed by anybody.
Let's quickly check if it's all working.
We could actually remove
some of those log messages in production.
But let's see if we can open a blog post.
This works fine.
Let's try the About page.
Of course we could write some content in here,
but that's fine.
Let's try another post.
And maybe try the "Dark Mode" functionality as well.
Everything is working just like we expected.
So that's it. Our blog website
is now visible to the public,
and hosted on the Vercel platform.
If we make any changes to the code,
we just need to push those changes
to the "main" branch on GitHub,
and Vercel will rebuild
and update our website automatically.
As you can see, it's pretty easy to set up,
and very convenient.
So I really recommend trying out Vercel
for deploying your Next.js projects,
before looking for other, more complex solutions.