We can easily deploy a Next.js app using Vercel and it is also the best way. But, if we have an intention to deploy a Next.js app as static pages on a cloud server like digital ocean, Vultr, etc., this article will help you.
Prerequisites
I believe that the reader has a basic knowledge about the Next.js framework and dealing with the cloud server already. Otherwise, the articles, How To Create A Multi-Page Website With Next.Js and How To Set Up Your Own Cloud Server On Vultr (VC2) will help you.
What we will learn
Here in this article, I am explaining the steps for creating a simple Next.js app and deploying it as static pages in a cloud server using proper NGINX configuration.
- Creating a simple Next.js app
- Using Git for simplifying our project workflow
- Creating and configuring a cloud server
- Deploying the Next.js app on a cloud server.
- Buying a domain and directing it to our server
- Setting up an SSL certificate and configure it to renew automatically.
Deploy Next.js app as static pages on cloud server
We are going to create a Next.js app using the create-next-app tool first and deploy it in the Vultr cloud server.
This is not an easy task but the below steps make it easier for us.
1. Create a Next.js application
A simple Next app can be created using create-next-tool easily. So, install Node.js on our system, and using NPX, we can create an app.
Open the project with Visual Studio Code after creation.
The below commands will do these processes.
npx create-next-app sample-app cd sample-app code .
Now, we can start our app using the below command.
npm run dev
Now, opening the address http://localhost:3000 will direct us to the home page of our Next.js app that is shown below.
2. Edit the Next.js configuration file
When ESLint is detected in your project, Next.js fails your production build when errors are present.
Sometimes we will face these errors during the production. So we need to edit the Next.js configuration file (next.config.js) and add some code to ignore the eslint rules during build time.
// next.config.js
module.exports = {
reactStrictMode: true,
eslint: {
ignoreDuringBuilds: true,
},
};3. Add the project to a Git repository
Some people are still using FTP clients for copying the project from the local system to the server. But understand that Next.js applications contain a node_modules directory that contains a lot of files that make the FTP process harder. So the best method is to add the code to a git repo.
Some of the best Git service providers are GitHub, Bitbucket, and Gitlab. Here we are choosing GitHub.
I already have an article explaining the steps of adding a project to GitHub and Bitbucket which I have given below.
So refer to that article and add the Next.js app we created to a git repository.
Adding An Existing Project To GitHub Or Bitbucket
The important steps to add the project to a GitHub repo are provided below. But to get a repository URL like https://github.com/syamjayaraj/simple-app, you have to refer the above article and create a repository first.
git add .
git commit -m "first commit"
git remote add origin https://github.com/syamjayaraj/simple-app
git push -u origin master
4. Create a cloud server
Creating a cloud server is an easy task. I am skipping this step because an article is there in Techomoro explaining the steps. The link to this article is given below.
How To Set Up Your Own Cloud Server On Vultr (VC2)
So after creating a cloud server, we can access our server’s terminal using ssh. Now we get a terminal window to execute commands in our server like below.
5. Configure the cloud server
To run a Next.js app in an Ubuntu server, we must install some tools and configure it. Refer to the below steps and execute them in the cloud server terminal.
5.1 Install Nodejs and npm
Next is a Node.js library and it requires Node.js and npm to be installed on our server.
Note:- The Node.js tool is only needed for making a build of the Next app. If you are closing the build folder, then Node.js is not needed.
The below commands will install the latest version of Nodejs.
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash - sudo apt-get install -y nodejs
5.2 Setup Firewall
We need to enable the firewall. The following command enables the firewall.
sudo ufw enable
Now, configure the firewall to allow HTTP, HTTPS, and SSH access.
sudo ufw allow http sudo ufw allow https sudo ufw allow ssh
Note: For the Lightsail server, you need to enable, SSH, HTTP, and HTTPS from the Networking tab in the Lightsail dashboard.
5.3 Setup NGINX
NGINX is a free, open-source, high-performance HTTP server and reverse proxy. So, Install NGINX to configure a reverse proxy for our application.
sudo apt-get install nginx
5.4 Create an NGINX configuration
Now, we need to edit the default configuration of NGINX. So, using the nano editor, open the default configuration file.
sudo nano /etc/nginx/sites-available/default
From the nano editor, remove all the lines using Backspace and add the below lines to it.
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
#try_files $uri $uri/ =404;
if ($request_uri ~ ^/(.*)\.html) {
return 302 /$1;
}
try_files $uri $uri.html $uri/ =404;
}
}Nano editor tips:-
Use the keyboard shortcuts below to save the file.
1. Ctrl + O (Write out)
2. Enter
3. Ctrl + x (exit)
Now create a SampleApp.conf file inside the sites-available directory which describes the configuration of the Next app we are going to deploy.
sudo nano /etc/nginx/sites-available/SampleApp.conf
Insert the below lines in nano editor and change the domain name with yours.
server {
root /var/www/html/sample-app/build;
index index.html index.htm index.nginx-debian.html;
server_name mynewblog33.com www.mynewblog33.com;
location / { try_files $uri /index.html; }
}Nano editor tips:-
Use the below keyboard shortcuts to save the file.
1. Ctrl + O (Write out)
2. Enter
3. Ctrl + x (exit)
Enable the configurations we have made.
sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled sudo ln -s /etc/nginx/sites-available/SampleApp.conf /etc/nginx/sites-enabled/
5.5 Checking Your Configuration File
Whenever you make changes to your Nginx configuration file, it’s important to check whether you’ve left behind any syntax errors. This can be done by running the following command.
sudo nginx -t
If there are errors in your configuration file, the command’s output will tell you exactly where in the file the error was found.
Conversely, if there are no syntax errors in any of your NGINX config files, you will see output similar to the following.
Outputnginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
5.6 Restart NGINX server
If the test is successful, restart NGINX using the below command.
sudo service nginx restart
6. Clone and Build the Next.js App
We already created a GitHub repository and pushed the code. Now, clone the repository to our server.
We will deploy this cloned Next app in our cloud server.
So from the GitHub repository, click on the Code button, and clone the Next app with the below command.
The below command will make a clone of this app on our server. We have to remember that the project must be cloned to /var/www/html directory in our server.
cd /var/www/html git clone https://github.com/syamjayaraj/SimpleApp.git
Now enter into the project and install the dependencies using the below commands.
cd SimpleApp npm i
Now we can build the app and export it. This will create an out directory inside our app and all the static HTML pages can be seen here.
npx next build npx next export
7. Connecting domain
So the Next.js app is ready. Now we can connect a domain. The steps for purchasing a domain name from Godaddy and configuring it for directing it to our server are given below.
7.1. Buy a domain
We can buy a domain from any Domain registrar service. Some of them are listed below.
Here I am choosing Godaddy to purchase the domain.
7.1.1. Search for a domain
Log on to https://www.godaddy.com/ and search for a domain. If it’s available add it to cart.
7.1.2. Choose the bundle options
Godaddy will force you to buy domain privacy protection, email address, and hosting with the domain. Here I prefer skipping those bundle options.
7.1.3. Complete the purchase
Complete the purchase by entering the billing information and payment details. You can purchase the domain for a minimum of 1 year to 5 years. Here I am buying it for 1 year.
7.1.4. Change the DNS
Now from the top menu, select My Products. You can see the purchased domain there.
Click on the DNS and add two new records.
- A record with name @ and value Server IP address.
- CNAME record with name www and value @
8. Set up an SSL certificate
An SSL(Secure Sockets Layer) certificate, creates a secure link between your website and a visitor’s browser. So that the data sent from the user’s browser to our server get encrypted. This won’t allow intruders to read the data. All the browsers nowadays show a warning if the site doesn’t have an SSL certificate.
So we are going to set up an SSL certificate for our blog. Let’sEncrypt provides an easy way to set up a free SSL certificate.
So follow the steps to set up an SSL certificate for the blog we are going to create.
8.1. Add the repository
Add the Certbot repository to our system first.
sudo add-apt-repository ppa:certbot/certbot
8.2. Update system packages
The below command updates the package lists for upgrades for packages that need upgrading, as well as new packages that have just come to the repositories.
sudo apt-get update
8.3. Install Certbot
Now install Certbot from the new repository.
sudo apt-get install python3-certbot-nginx
8.4. Setup SSL certificate
Now with Certbot, we can create an SSL certificate for our app.
You can set up a single SSL certificate that is valid for multiple domains or subdomains. In our case, we also need to set up www.mynewblog33.com. So set up an SSL certificate for it too.
sudo certbot --nginx -d mynewblog33.com -d www.mynewblog33.com
- Replace the domain name with yours.
8.5. Setup auto-renew for SSL certificate
Let’s Encrypt certificates only last for 90 days. But a single command can auto-renew the certificate.
sudo certbot renew --dry-run
8.6. Restart NGINX server
All setup will reflect in our server after restarting Apache2.
sudo service nginx restart
9. Access our app
Our Next.js app is now live and the public can access it with the domain address below.
https://www.mynewblog33.com
Summary
In this article, we discuss the 9 steps to deploy a Next.js app on an ubuntu cloud server with NGINX configuration. We also learned to connect a domain name to access our app and also secured it using a free SSL certificate provided by Let’sencrypt. We also configured the server to renew the certificate when it expires.
