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.