All language subtitles for 007 A Full Deployment Example (To Vercel)_Downloadly.ir_en

So it is time to deploy

and we have two deployment options here, as we learned.

Now, only the standard build makes sense

for our project here at the moment,

because we are using server-side features,

like API routes or page re-validations,

and therefore, I will now, again, run npm run build

to produce this production output,

even though we just did it, but still I'll now do that,

and now that gives us the .next folder.

That next folder contains this production output.

Now, how would we deploy our page done in the end?

Well, in the end, you can take your entire project folder

and just move that onto a node JS server.

So onto some remote computer that supports node JS,

and then on that machine, you would run npm install

to install all the dependencies again,

and then npm start.

Npm start runs next start,

and that will then use that build output

and bring up the production server.

So npm start brings up the production server,

and we can test this locally here.

If I run npm start, I'm now again,

hosting this on localhost 3000,

but this is now the production ready application.

So now if a reload this page here, it still works as before,

but that's actually already the production ready app,

and as you see, it's super, super fast, really good to use.

So, that's now production ready

and that is what we would deploy

and do on some other computer, as well,

and therefore, you can use any hosting provider

that supports node JS.

Just upload your project code, run npm install

on that provider's machine, and then npm start,

and then make sure that internally you forward port 3000

to port 80 to the outside world.

Now the exact steps for that will always differ

based on which hosting provider you're using.

Now, a very good hosting provider for Next.js

is Vercel though.

Vercel is a service of the same company

that developed Next.js,

and that's why Vercel is highly optimized

for Next.js, and vice versa, I guess.

So, you don't have to use Vercel.

You can host Next.js on any node server, as I explained,

but Vercel makes hosting Next.js applications

very, very easy, especially when it comes

to topics like scaling and so on.

Though I will say, that there also are options like Netlify,

which also have great Next.js support built-in,

and which also make hosting

and scaling Next.js applications simple.

So definitely check out the docs of that.

I will use Vercel as an example here though,

also because we can get started for free

and we don't even need a credit card.

Now, definitely check out their pricing

if you plan on using it for a real site.

You can get started for free,

but at some point it will cost you money,

if you use certain features and so on,

but here for our purposes, we can use the free option,

and all we gotta do for that is sign up with them

and create a new account, and for this here,

we now need to sign up with GitHub, GitLab, or Bitbucket,

and that makes sense because you will need one

of these free options for deployment anyways.

So therefore, before we continue here,

let's first of all understand

why we need one of those options.

When deploying your Next application to Vercel,

you deploy it such,

that you push your code to a remote repository,

on GitHub, GitLab, or Bitbucket,

which are simply remote Git repository providers.

GitHub, of course, is the most well-known one I would argue,

and then once your code is on such a remote depository,

you can easily connect it to your Vercel account

and tell Vercel that whenever the code in

that repository changes, you want to redeploy,

and that makes redeploying super simple then

because all you have to do is,

you have to push your latest code to GitHub,

and therefore, that is what we will do here.

Now you need to have Git installed for this,

which is a version control system,

and you can get it for free from git-scm.com.

You don't need to know anything

about Git to follow along here.

For the moment, it's enough to install it.

If you want to learn more about Git though,

we have a course on that, the Git and GitHub course,

and we also got a free Git for Beginners Tutorial,

which you can explore.

So that might be worth a closer look

if you want to learn more about Git,

but here, just installing it and following along is enough.

So once you installed Git on your system

from that page by simply downloading it

and walking through the installer,

you should be able to use the Git command here

in your terminal,

and then as a first step, you want to run git init.

I'm not going to run it here

because I am already using Git in this project,

but what git init will do,

is it will basically just put this project

under Gits control.

Now, once you ran git init, you want to run git add dot,

and git commit, some message,

maybe a more meaningful message,

describing what you changed since your last git commit,

to create a code snapshot with Git.

So here I'll say, prepared for deployment, like this.

Now your output might differ here

because I already did commit before,

but if you're committing for the first time,

you'll see some confirmation that it worked.

Now, this simply saved all your code files

in a Git snapshot, and you can have multiple snapshots,

you can go back to an older one

if you mess things up, and so on.

By default, that will all happen

in a branch named main.

Here, I'm in a different branch

because I have different projects

for the different course sections,

but I did now switch to the main branch as well,

and therefore, I am in that branch at the moment.

So now you are in the main branch.

You can confirm this by running git branch,

and you should see main selected.

You are in the main branch

and you did add such as code snapshot.

That means your code is now saved with Git.

As a next step, you need to create a GitHub account.

You can do that for free by simply Googling for GitHub,

going to github.com and sign up for GitHub.

Again, you can do that for free.

So let me quickly sign in with my account here,

and once you did sign in, you can create a new repository.

Now, here you can give this repository

any name of your choice,

and I'll go with nextjs-course, but the name is up to you.

You can give it an optional description,

and you can choose whether it should be public or private,

both is possible, and here I'll go with private,

and then click create repository.

Now, no one, except for me will be able to see that.

Now, we can grab that link here, which we see here,

and go back to our project

and now run git remote add origin,

and then paste in that URL.

This sets up a connection between your local Git repository,

so between your local project,

and that remote repository.

Once you did that, you can run git push origin main,

to push the main branch to that repository,

and that's what we'll do now.

Now, if you are getting a repository not found

error message here, which you very well might,

you need to include your log-in credentials

into that remote URL.

For this, we can remove that remote repository

with git remote rm origin,

and once you did that, run the add command again,

but with a twist.

Now you want to go to your GitHub account

and there to settings, and there to developer settings,

and here to personal access tokens.

Click on generate new token there,

and to add any note you want, like local development,

and then make sure that under scopes here,

you select repo, also adminrepo_hook and delete_repo,

and then generate this token.

Now that token will never be shown to you again

but you can always generate a new one

and you should therefore, now copy it,

and now when you add your remote repository again,

add a @ symbol in front of github.com,

and then add your username here, in front of that.

So your GitHub username, and I will do that real quick,

and then try pushing again by running, git push origin main.

Now, you should be prompted for your password

and there you can use your GitHub password,

though that method is deprecated

and will stop to work in the future,

and therefore instead, you should use your token,

and once you did that,

the code should be pushed successfully to GitHub,

which means it's now uploaded to the remote repository,

and if you revisit your repository,

if you reload that repository page,

you should see your code here,

and now with that, we're ready to connect it to Vercel

and deploy our application.

For this, back here on Vercel,

we now want to continue with GitHub here

and sign up with GitHub, and give Vercel these permissions,

and now here, we need to import a Git repository.

So we need to connect Vercel

to the repository that holds our code,

and for this I'll click on that dropdown here,

click on add GitHub Org or Account,

and then I'm prompted to give Vercel access

to the repository of my account here,

and we can give it access to all repositories,

or only the repositories we know we want to grant access.

Like in this case, the nextjs-course repository,

and I'll do that and click install,

and now here, I can import that repository into Vercel.

So that's what I'll do here,

and I'll select my personal account here,

so that I can use that free deployment option,

and now we end up on this screen.

Now, it detects that we have a Next.js application here,

but we could also use Vercel

for deploying other kinds of apps.

It's very versatile, as you can tell,

but of course we want to go with Next.js here.

We can edit the root directory

in case we would have our code in some nested directory,

but we don't have that here.

We can tweak some settings.

For example, we can tell it that we want to build

with npm run build, and we could change this,

and I'll also stick to the default output directory,

and we can override environment variables,

and that is interesting,

because that allows us

to define production environment variables

without using that config file for that.

Now, here with our setup, we are already

using different environment variables in production,

so we don't need to add them here again,

but, instead of having separate environment variables here

for production, we could also inject

our production values here in this Vercel console,

but again, I will go with the setup I have

in the config file, hence, I'll leave that empty

and click on deploy,

and now Vercel will build our application and then start it,

and it will automatically build our pages

and pre-rendered pages,

it will host those on a CDN then,

which is optimized for speed and has great caching settings,

and it will then also, take our API routes

and put those into serverless functions,

which are executed on demand and scale infinitely

in a cost effective way.

So it's a great deployment option

and we don't need to do anything else to make it work.

So let's now wait for this deployment process

to finish here.

We see the same output as we did locally.

Now it's basically wiring everything up

with the Vercel's servers and machines,

and looks like it's about to be done.

Here we go, it's deployed,

and now we can click Visit,

and we see our application running in the web.

As you see there, everything works

just as it worked locally.

So that is working and now it is hosted in the web.

It's not hosted locally and we hosted it with Vercel.

Now you can go to the dashboard here

and then configure more things here.

You can assign a custom domain.

You can monitor it.

You can dive into the logs, explore certain analytics,

dive into the settings and configure it,

and do things like that.

Definitely, play around with those settings

and those options, if you are using Vercel

for your production ready app.

Now, the great thing is,

that if we now want to change something,

let's say in our contact form,

I want to change the text in the success notification.

I want to add a couple of exclamation marks.

Then we just make that change,

We then create a new Git snapshot

with git add and git commit,

changed notification message,

sounds like a good note here,

and then we push again by pushing main to origin,

and when we do that,

when we make that push,

Vercel will automatically recognize that.

It automatically recognizes this

and starts building again, as you can see here.

So it recognizes, pushes to main,

because that is the connected main branch here,

and whenever the code in that branch changes,

it will rebuild and redeploy our application,

which is of course pretty amazing

and makes redeploying a breeze.

So, let's wait for that rebuilding here to finish.

Here we go, looks like it's done,

and then visit the updated page,

which is of course served on the same domain,

and now here, if we give this a try

to see if everything works, does that work?

If I send a message, I get an error,

could not connect to database.

And why are we getting this error?

Well, you could think that it's a problem

with our environment variables, but that's not the case.

We did set those in our config folder

in our config file,

but keep in mind that we're using MongoDB Atlas,

and here we need to control who's able to connect.

We do this under network access,

and we added our local IP address, but now it was deployed,

and now to ensure that this deployed application,

which is running on some remote server,

that this can connect to MongoDB Atlas,

we need to add another IP address,

and if we know the IP off the server, we could add that,

but since we don't know it,

we want to allow access from anywhere.

We still have the password username protection in place,

but we need to enable all IPs to connect

to ensure that our deployed application also can connect.

Otherwise, all these environment variables

don't do anything if we block the connection

from MongoDB's side.

So let's wait for this update

to be in effect here on MongoDB Atlas,

so that all hosts can connect to this database,

and once this is done, let's try sending this message again,

and now we have a success

and we see all the exclamation marks.

So now that works,

and that's how we can deploy our Next application

with npm run build with that server-side code with Vercel.

It's not the only option, but as you saw,

it's very, very easy to use it.