Next.js is a popular React framework which enables developers to build user-friendly web applications and websites. It come with inbuilt file/folder name based routing to jetpack developers into the code part directly. Next.js simplifies the process of creating both static and dynamic web pages, offering built-in features like server-side rendering (SSR) and static site generation (SSG). These features enhance performance and SEO by allowing pages to be pre-rendered on the server. Next.js also supports API routes, enabling developers to build full-stack applications within a single framework.
Deploying Next.js application on an Ubuntu VPS with Nginx as the reverse proxy is a reliable and efficient way to serve your web application. In this tutorial, we’ll walk through the steps to set up and deploy Next.js application on an Ubuntu server using Nginx.
Prerequisites
Before you begin deploying Next.js application, make sure you have the following:
- A server running Ubuntu 24.04
- Basic knowledge of the Linux command line.
- A root user access or normal user with sudo rights.
Deploying Next.js Application with Nginx on Ubuntu
Deploying Next.js Application on Ubuntu 24 with Nginx involves some simple server tasks and to install some required software and tools.
Step 1: Update and Secure Your Server
Before deploying Next.js application, it’s essential to update your server packages and secure it.
sudo apt update && sudo apt upgrade -y
Step 2: Install Node.js and npm
For latest version, visit the Node.js official documentation page.
# installs nvm (Node Version Manager) curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash # download and install Node.js (you may need to restart the terminal) nvm install 22
Verify installation
# verifies the right Node.js version is in the environment node -v # should print `v22.17.0` # verifies the right npm version is in the environment npm -v # should print `10.9.2`
Step 3: Install and Configure Nginx
Install Nginx:
sudo apt install nginx -y
Create a new Nginx configuration file for your application:
sudo nano /etc/nginx/sites-available/your-nextjs-app
Add the following configuration:
server {
listen 80;
server_name your_domain_or_ip;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}Replace your_domain_or_ip with your domain name or server IP address. Save and close the file.
Create a symbolic link to enable this configuration:
sudo ln -s /etc/nginx/sites-available/your-nextjs-app /etc/nginx/sites-enabled/
Test the Nginx configuration to ensure there are no errors:
sudo nginx -t
If the test is successful, restart Nginx:
sudo systemctl restart nginx
Step 4: Secure Your Application with SSL
It’s highly recommended to secure your application with SSL. You can use Certbot to obtain a free SSL certificate from Let’s Encrypt.
First, install Certbot:
sudo apt install certbot python3-certbot-nginx -y
Then, run Certbot to obtain and configure the SSL certificate:
sudo certbot --nginx -d your_domain
Certbot will automatically configure SSL for your Nginx site.
Step 5: Install Next.js
You can install new Next.js app, or clone an existing app from a git repository to a new folder or just copy an existing app from a git repository to current folder. I will put an example for each app below.
Method 1: Create new Next.js app
npx create-next-app@latest
And follow instructions shown on the screen. For example, I installed a test app for this article, as shown below.
Need to install the following packages: create-next-app@15.3.5 Ok to proceed? (y) y ✔ What is your project named? … myapp ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like your code inside a `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to use Turbopack for `next dev`? … No / Yes ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
When installed cd into myapp, or whatever name you chose, folder, and skip to the next step.
Method 2: Clone from git repository
Clone existing app from a git repository you have url for.
git clone https://bitbucket.org/inimisttech/online-tools.git myapp cd myapp
cd into myapp, or whatever name you chose, folder, and skip to the next step.
Method 3: Use existing git repository in current folder
cd /var/www/html mkdir myapp && cd myapp
and setup git inside the myapp folder
git init git remote add "origin" https://bitbucket.org/inimisttech/online-tools.git git fetch origin master:master git checkout master
Past this step you should be able to complete your Next.js app setup and deployment.
Deploying Next.js Application – Final Step
Step 6: Build the app and run the app
Since we have all the tools and file ready by now, we can install the necessary node modules mentioned in our package.json file.
npm install
And finally build
npm run build
and run
npm run start
Alternately you could use a server manager such as pm2 to run your app.
I would install pm2 globally
npm run pm2 -g
And run app via it
pm2 start npm --name "inimisttools.com app" -- run start
I have created a very useful inimisttools.com app with various “daily use tools” for deploying Next.js Application. It led me to blog these steps involved to build and Deploy Next.js Application with Nginx on Ubuntu , for my own reference later on as well.
