The last option for running your Next.js application
is to set up your own server with Node.js.
And like in the previous video, I'll do that
using a Ubuntu server I created in Digital Ocean.
Let's start by connecting to this IP address
using SSH.
And I'll log in as root
so we have full privileges.
This machine only has the base Linux system.
But to run a Next.js app
we need to install Node.js.
There are different ways to do that.
We could install the Node.js version
provided by the Linux distribution,
in this case Ubuntu.
But that's usually not the latest version.
So I prefer to install the package
provided by NodeSource,
that is available from an additional apt repository.
In practice we need to run this setup script,
that we can first download using "curl".
So this saved a shell script,
called "nodesource_setup.sh",
and we could inspect this file before running it
to check exactly what it does.
But it basically adds the NodeSource repository
to the APT sources for our system.
The next steps are to run that script,
and then install the "nodejs" package.
So let's run the setup script using "bash".
This configures the NodeSource repository,
and also does an "apt-cache update".
At this point we can run "apt install nodejs"
and we should get the Node.js version
provided by NodeSource.
We can check which version we have installed
by running "node --version".
And similarly we can also check the "npm" version.
I'm going to update "npm" to the latest
by running "npm install -g npm",
where "-g" means it will be installed globally.
Ok. So we should now have the latest npm
that is "7.20".
All right. At this point we have Node.js
set up on our system.
Now we want to run our Next.js app,
which means that we basically need to upload
this project to the server.
Let's prepare a folder on the server
where we can upload it to.
Let's make a directory called "/opt/next-blog".
Now we need to upload all the files,
so let me go and copy the IP address again.
And then I'm going to use Cyberduck
to upload the files.
We want to use SFTP,
connect to that server, as "root".
Trust the server fingerprint.
And, if we start from the top of the file system
we want to go into "opt" and then "next-blog".
So here's where we want to upload
all our project files.
Let me open this project folder in Finder
so I can drag it into Cyberduck from here.
In fact we want to copy
what's inside "next-blog",
so let's select all the files.
But I'm going to exclude the "dist" folder,
that contains the static export.
And also "node_modules",
because we'll need to install
the npm packages on the Linux system.
So I'm going to upload all these other
files and folder via SFTP.
And we now have all the project files
available on the server.
To be clear, I'm doing these steps manually
just to show you what's involved,
but you could automate the process,
for example by fetching the project code
from a Git repository instead.
Anyway, if we go back to our Terminal
with the SSH session,
We can now go into the project folder,
and we should see all the files here.
Now we need to install all the "npm" packages,
we need to do this here on Linux,
because if you copy the packages
from a different system, like macOS,
they may not work on Linux.
Anyway, at this point we should see
a "node_modules" folder with all the dependencies.
So we can now build our Next.js app,
using "npm run build" like we do locally.
This should have generated all the static pages,
under the ".next" folder.
And at this point we can finally start
our Next.js app in production mode.
It's running, but on port 3000.
So if we go back to our web browser
we can try opening this IP address,
but we need to add port 3000 to the URL.
And here's our Blog website,
that seems to be fully working.
So that's good, but it's a bit annoying
that it's running on port 3000.
We can easily change the port
used by the Next.js server.
We can run the "next" tool directly with "npx"
and if we look at the help for the "start" command
you can see that it accepts a "port" option.
So let's start the server with "npx next start",
but passing "--port 80".
And it's now running on port 80
that's the default HTTP port.
So in the browser we can now
simply load the server address without port.
And this works fine.
So there you go. We have our Next.js app
running in our own server with Node.js.
It's similar to how we've been testing it
in production mode locally,
except that you need to set everything up
on a remote server.