All language subtitles for 002 Deploying to Vercel_en

Next.js is developed by a company called Vercel,

that also provides a platform where

you can host your applications.

You don't have to use Vercel of course,

Next.js is open source,

and you can run it on your own servers,

or on other platforms if you wish.

But Vercel is simple to use

and has some great features.

It's free for personal or non-commercial projects,

or you can pay a monthly subscription

for more serious projects.

Take a look at the Pricing page for more details.

If you sign up, you'll then see this dashboard,

from where we can "Create a New Project".

Now, for this we need a Git repository.

And I already have one on Github

for the next-reviews app,

so this is what I'll use.

For your own applications, you can connect with either Github,

Gitlab, or BitBucket.

Anyway, let's go and create a new project.

The first time we'll need to

connect our Github Account,

and this will prompt us to install

the Vercel integration

into that Github account.

We need to give Vercel access to our repositories,

either all of them, or only selected ones.

I will select only the "next-reviews" project,

since that's what I want to deploy.

Vercel needs access our code so

that it can build our app.

So let's install this Github application.

I can now select my account from this list,

and import the "next-reviews" project from Github.

Here we can configure a few settings.

Note that Vercel supports many

different frameworks,

not just Next.js,

but it automatically detected

which one we're using.

We can also define Environment Variables,

which can be useful to set database

connection details for example.

But we don't need any variables at the moment.

So let's click "Deploy".

It will take a minute or so

to set up a new project.

Ok, the build completed.

And congratulations! Our project is now deployed.

Let's continue to the dashboard.

Here we can see more details about our project.

It was automatically assigned

a "vercel.app" subdomain.

And if we open this URL,

here's our website, deployed to production.

Let's quickly check that all

the pages are working.

It looks fine.

So our Reviews app is now visible to the public.

And with a secure connection,

because Vercel also provisioned

a certificate for us.

Now, for a real world application

we'd probably want to configure

a custom domain name,

but for this example I'll just

use the autogenerated one.

Now, the best feature of the Vercel platform

is that it does automated deployments by default.

This means that, whenever we push

any changes to our Git repository

Vercel will automatically build and deploy

a new version of our website.

You can see that our first deployment

was generated from the "main" branch

at a specific Git commit.

Let's see what happens if we modify our project.

For example, we could simply change

the footer in "layout.jsx".

I'll edit this file directly here,

just because it's quicker,

but normally you'll want to test

the changes locally first.

Anyway, let's add some text to the footer,

saying "Deployed on Vercel".

We can now commit the changes

straight from this page.

Let me write "Deployed on Vercel" as the message,

and let's commit this change

directly to the main branch.

If we go back to the project page,

and look at the commits,

note that there's a circle

next to the latest commit.

It's amber, meaning there's an action in progress.

The previous commit shows a green tick,

meaning that it was built successfully.

In fact, if we go and look

at the Vercel deployments,

you can see that there's a new one building,

and it was triggered by our latest commit.

So Vercel is automatically building

a new version of our application,

to include the latest change.

It's now ready.

Which means that, if we go to our public website,

and reload the page,

it now shows "Deployed on Vercel" in the footer.

Our change is already visible to all our users.

All we need to do is push our code to Github,

and Vercel will automatically

deploy the latest version.

Not only that, but if there's a problem

with the latest deployment,

we can perform a rollback simply

by pushing this button.

Also, in addition to production deployments,

we can automatically deploy other Git branches.

This way we can test changes

in a separate environment,

before merging them and deploying

them to production.

So, Vercel is a powerful platform

for continuous deployments,

and I definitely recommend giving it a try.