Hosting a Next.js app on a Virtual Private Server (VPS)

For many developers, development might not be a serious issue and for many, deploment is a serious issue.

I was in the dilema after development with my team, I was responsible for the web app deployment. It was a serious issue because Next.js can not just be bundled like a ReactJs app.

There are several options available for me but I have to settle for the option suitable for the business use case, which VPS(Virtual Private Server). Then jump on google to see if I can see any resource to assist with the deployment.

Many resources found were not straight-forward. After several days, days will soon turned to weeks but finally, I figured out how to deploy the web app on VPS.

One of my team members said: "The app has finally been deployed anyhow....."

Considering what I went through, I decided to write this, with step by step on how to host NextJS web app on VPS.

One of the reason I settled for VPS was because Hosting a Next.js app on a Virtual Private Server (VPS) can provide lightning-fast performance and reliability for your web application.

Let's go over the steps to set up and deploy a Next.js app on a VPS.

First, let's go over the prerequisites:

1. A VPS provider: There are many options available, such as DigitalOcean, Vultr, and Linode. Choose a provider that meets your needs and budget.

2. A domain name: You'll need a domain name to point to your VPS. You can purchase a domain name from a domain registrar such as GoDaddy or Namecheap.

3. SSH access to your VPS: You'll need to use Secure Shell (SSH) to access your VPS and set it up.

With these prerequisites in place, let's go over the steps to set up and deploy a Next.js app on a VPS.

1. Set up your VPS: Follow the instructions provided by your VPS provider to set up your VPS and create a user with sudo privileges.

2. Install Node.js: Next.js requires Node.js to be installed on your VPS. You can install Node.js using the following command:
   

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

1. Install Git: Next.js uses Git to manage its dependencies, so you'll need to install Git on your VPS. You can do so using the following command:

sudo apt-get install git

1. Clone your Next.js app repository: Use Git to clone your Next.js app repository to your VPS. Make sure to replace with the URL of your repository.

git clone <repository-url>

1. Install dependencies: Navigate to the root directory of your Next.js app and install the dependencies using the following command:

npm install

1. Build the app: Next.js uses server-side rendering, so you'll need to build the app before you can start it. Run the following command to build the app:

npm run build

1. Start the app: Now that the app is built, you can start it using the following command:

npm start

1. Set up a reverse proxy: To serve your Next.js app over HTTPS, you'll need to set up a reverse proxy. One option is to use Nginx, which is a popular web server. First, install Nginx using the following command:

sudo apt-get install nginx

Then, create a configuration file for your Next.js app in the /etc/nginx/sites-available directory. You can use the following configuration as a starting point, replacing with your domain name:

server {
     listen 80;
    server_name example.com www.example.com;

    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
     }
}

Be sure to replace example.com and www.example.com with your own domain name. The root directive should point to the public directory of your Next.js app.

Once you have created the server block configuration file, you will need to enable it by creating a symbolic link from the sites-available directory to the sites-enabled directory:

sudo ln -s /etc/nginx/sites-available/nextjs-app.conf /etc/nginx/sites-enabled/

Finally, restart Nginx to apply the changes:

sudo systemctl restart nginx

By now your web app should be up and running. Thank you for reading