Now, when it comes to deploying NextJS apps
there are different hosting providers you can use
and there are different ways
of configuring your project as well.
You can, for example, use environment variables.
For example, to hold things like your database credentials.
I'll not dive into that here.
I do in my full next JS course, though.
But for this example here we'll just keep
the credentials stored here in this code
and from a security perspective, this is fine by the way
because this code will never end up on the client.
It just might be unconvenient
to use one and the same database and one and the same user
for development and for production.
But for this demo, this does not matter.
So I'll stick to this approach here.
And regarding the hosting provider
I will use Vercel.
Vercel is a great hosting provider for NextJS applications
because the Vercel actually is a hosting provider
by the same team that's developed NextJS.
So it's really embracing NextJS
and optimized for NextJS if you wanna put it like this.
And deploying NextJS applications to Vercel
is thankfully also extremely simple.
Now what you'll need to do to start deploying
is sign up with a Git repository provider,
because with Vercel you will directly link
your GitHub repository,
which holds your source code, for example,
to Vercel and they will then get your source code from
that repository and deploy it for you.
Therefore you need to use GitHub, GitLab, or Bitbucket,
which are Git repository providers
to put your code there before you can deploy it with Vercel.
Now here I will use GitHub, which arguably is
the biggest and most popular Git repository provider.
And I already did log in with my account here.
Once you did create an account and login,
it's free,
you can create a new repository
and you can give this repository any name you want,
like NextJS course demo or anything like this.
You can also give it a description.
And then chose whether it should be public or private.
If it's public, everyone can see it.
Everyone can see your code.
If it's private only people you grant access to can view it.
And I'll go with private here,
but either of the options can be correct.
It simply depends on which kind of project it is.
If it's a open source project it will probably be public.
So I'll go with private and create my repository.
Once that is created, you need to push your code here.
Now for that you need to install Git on your local system
and you can git git-scm.com.
It's available for all operating systems.
You can download the installer from there
and simply walk through it to install Git on your system.
And once you installed get on your local system
you can create a so-called commit in your project,
a code snapshot, you could say.
And then push that commit,
that repository as a whole, actually, to GitHub
to move your code with your code history to GitHub.
Now, I won't turn this course into a Git course.
If you wanna learn more about Git and GitHub
we got a standalone course on that which you can take.
Here I will assume that you have those Git basics
and that you have Git installed now.
And if you have it installed
you can then go back into your local project,
into your project folder and create a code snapshot,
a commit as it's called.
You do this by running git add dot
and you can run this if you got Git installed
and then git commit and then some message of your choice.
For example, ready for deployment.
Though typically you want to add commit messages
that describe what you changed.
But with that, I now created such a snapshot, such a commit
and now we're ready for deployment.
Now that means that now we need to push our code to GitHub.
For this we can grab this URL here,
which will point to the repository we created.
And in our local project folder run git remote add origin
and paste that URL in here.
Now depending on whether you worked with Git
and GitHub before or not,
you might wanna add your GitHub username here
in front of github.com.
If you did work with GitHub before
and push before you probably don't need to do that,
but if you never pushed anything to GitHub
adding this will ensure
that you're prompted for your password
and that you have a chance of entering your credentials,
because of course you'll need to authenticate yourselves
in order to successfully push to this repository.
You can't just start pushing to some random repositories,
which you don't own.
So therefore here I will now add this origin here
and then run git push -- all.
And this will now push our code here.
Now you might be prompted for your password here
and you can then enter your GitHub password
or you as a token
for
authentication
For this to generate such a token
you need to go to your GitHub settings
and then there go to developer settings,
personal access tokens,
and generate a new token here.
Once you confirm this with your password
you can add some note here like NextJS deployment
or a more general purpose.
And then under scopes select repo,
delete repo,
and
admin repo hook here,
and then generate a token.
And now you'll need to copy that token here,
which is showing up here,
and enter this as a password when you're prompted for it.
Once you did all of that and you pushed successfully
you should see your code in this repository,
which you just created in the main branch.
And now we can link this repository
to Vercel to start deploying.
Now, before we do that
let me talk about building for production
and what Vercel actually does.
Vercel is a hosting provider,
which you can not just use for NextJS.
You can also use them for other projects,
but which definitely is optimized for NextJS.
So whilst you can host other things there as well
and it might be optimized
for those other types of projects as well.
It is definitely optimized for NextJS.
And that means that you can just connect Vercel
to your GitHub repository
and the Vercel will build and then deploy
and start your project for you.
So you don't need to run any built command on your own,
Vercel we'll do that for you.
Nonetheless, I wanna show you what Vercel does.
And therefore I'm back in our local code here
and there in package.json we see a couple of scripts,
which are commands we can execute in this project.
We worked a lot with the dev script
to start this development server.
And that is the script
which we used during local development.
But we can also run the build script
to build our project for production.
So to optimize all our code, minify it, and so on.
And you wanna run this if you do deploy it on another host,
which does not build the project for you.
So we don't need to do it with Vercel,
but you might need to do it forever hosting providers.
And then once you run this command
this will give you a .next folder,
which contains some of these optimized files.
For example, this thought .next folder
will also contain all those pre-generated page files,
those HTML files for your pages,
like the starting page here,
or the individual meetup detail pages.
So this is what npm run build will do for you
and Vercel execute this command
on our behalf on their servers.
So we don't need to do that.
But if you would host your project on another server,
which you manage yourself, for example,
you need to run npm run build
and there after with npm start
you can start a production server.
So now again, we have a running server,
but this is now the production server,
which you could start on a remote machine,
which you administer yourself
to run the server for your next application.
And that server therefore should of course stay up
and running on that machine
to which you deployed your application as long as you want
to expose it to the world.
Though I work with it here though.
Now all of that will be done by Vercel
and therefore let's now go back to Vercel
and continue with GitHub here.
And now here we'll need to link GitHub to Vercel.
Now you are then prompted
to give Vercel certain permissions,
give it access to your repositories,
and I'll do that here.
And once you did that, you can select that repository,
which we created a couple of minutes ago here,
and connect it to Vercel.
So I'll click import here on that repository.
Now we'll select this personal account here.
You might be prompted to create an account here.
And there you wanna choose the personal one,
which is free to use or free to get started.
Definitely check out their pricing pages
to learn more about the different options you have there.
And with that, we now can configure
how our code should be pulled
and how the project should be built.
And all the defaults here typically should work for you.
It detected that it's a NextJS project.
The default build and output settings work for us
And we could override environment variables here
if we would be using any.
But we aren't and hence, we can just click deploy.
Now to ensure that it really works
we'll also need to go to MongoDB Atlas
and change something here.
There under network access you will need to make sure
that you allow access from anywhere.
This ensures that the Vercel servers
on which our application will run,
will be able to connect to MongoDB.
Otherwise this will fail
and our data can't be loaded and stored.
So we need to grant this access.
We still, of course, use our credentials
for actually establishing the connection,
but we need to open up that global access to allow Vercel
and its servers and our code running on their servers
to connect to MongoDB.
Now it can take a while until this operation is done.
So let's wait for this.
And once it's done,
here, we actually see an error that connection failed
because I just changed it after starting the deploy,
but we can simply hit deploy again and start a new deploy,
which should now succeed
because now we did open up MongoDB for outside access.
So let's now wait whether
that now starts up successfully here.
It definitely built our site successful here.
That's good.
And that is looking good.
Now we can click visit and we see our site up
and running on Vercel's servers here.
We can also try adding a meetup here
test street five, this is a test and see whether that works
and it does.
It might not show up immediately on this page
because this page is statically generated
and then only revalidated
once every second for incoming requests
and then it needs to be pre-generated again.
So even after one second, it might not show up immediately,
but eventually we see our new meetup here
and we can't visit it here though.
We get a 404 error here
and that's actually an expected error at this point.
What's the problem here?