All language subtitles for 032 Deploying Next.js Projects_en

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?