How to Install Next.js on Ubuntu 22.04

Next.js is a powerful and flexible React framework that enables you to build server-side rendering and static web applications easily. This guide will walk you through the steps required to install and set up Next.js on an Ubuntu 22.04 server using root privileges. We’ll cover everything from installing the necessary dependencies to creating a basic Next.js application.

Step 1: Initiating Instance Creation

• Creating a New Instance
  • To create a new instance, click on the blue “Create” button located in the top-right corner of the page.
  • Select “Add New Instance” to begin setting up a new virtual machine.

Step 2: Choosing a Location

• Select a Data Center
  • On the “Create New Instance” page, choose your preferred data center location. For example, you might select “Amsterdam, Netherlands”.

Step 3: Selecting a Plan

• Choose a Plan
  • Pick a plan that meets your requirements. Options vary in specifications and price, from $3.5 to $22 per month, offering different CPU, memory, storage, and bandwidth.
• Choose an Operating System
  • Scroll to the “Choose an image” section and select Ubuntu 22.04 from the list of available distributions.

Step 4: Authentication Method

• Select an Authentication Method
  • Choose between SSH keys (recommended for better security) or a password for root access. In this guide, we’ll proceed with the password option.
• Complete Instance Creation
  • Click the “Create Instance” button at the bottom of the page to finalize the setup.

Step 5: Connecting to Your Instance

• Retrieve SSH Credentials
  • Note the IP address of your newly created instance from the Shape.host dashboard.
• Connect via SSH
• Open a terminal on your local machine and use the following command to connect to your instance:

ssh root@your_instance_ip

• Replace your_instance_ip with the actual IP address of your instance.

Step 6: Update Your System

Before starting the installation, ensure that your system packages are up-to-date:

apt update && apt upgrade -y

Step 7: Install Node.js and npm

Next.js requires Node.js and npm (Node Package Manager) to be installed. You can install these using the NodeSource repository, which provides the latest versions of Node.js:

1. Install NodeSource repository:

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash - 

1. Install Node.js and npm:

apt install -y nodejs

1. Verify the installation:

node -v
npm -v

This should output the versions of Node.js and npm installed.

Step 8: Create the /var/www Directory

If the /var/www directory does not exist, create it:

mkdir -p /var/www

Step 9: Navigate to the /var/www Directory

Change to the /var/www directory:

cd /var/www

Step 10: Create a New Next.js Application

Use the npx command to create a new Next.js application:

npx create-next-app@latest my-next-app

Follow the prompts to set up your project. You can accept the default settings.

Step 11: Navigate to the Project Directory

Change to the newly created project directory:

cd my-next-app

Step 12: Install Dependencies

If there are additional dependencies required, install them:

npm install

Step 13: Start the Next.js Development Server

Start the development server to ensure everything is working correctly:

npm run dev

You should see output indicating that the server is running. By default, Next.js runs on port 3000. Open your browser and navigate to http://your_server_ip:3000 to see your new Next.js application.

Step 14: Configure Next.js for Production

For a production environment, you need to build and start your Next.js application in production mode.

1. Build the application:

npm run build

1. Start the application in production mode:

npm start

Step 15: Set Up a Reverse Proxy with Nginx

To serve your Next.js application with Nginx, follow these steps to set up a reverse proxy.

1. Install Nginx:

apt install -y nginx

1. Configure Nginx: Create a new configuration file for your Next.js application:

nano /etc/nginx/sites-available/my-next-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;
       }
   }

1. Enable the Nginx configuration:

ln -s /etc/nginx/sites-available/my-next-app /etc/nginx/sites-enabled/

1. Test the Nginx configuration:

nginx -t

1. Restart Nginx:

systemctl restart nginx

Your Next.js application should now be accessible via your domain or server IP.

Additional Configuration: Using PM2 for Process Management

PM2 is a process manager for Node.js applications that makes it easy to keep your application running. It also provides features like process monitoring and log management.

1. Install PM2:

npm install -g pm2

1. Start your application with PM2:

pm2 start npm --name "my-next-app" -- start

1. Set PM2 to start on boot:

pm2 startup systemd
pm2 save

For hosting your Next.js application, consider using Shape.host’s Linux SSD VPS services. Shape.host provides robust and scalable cloud solutions tailored to various needs, ensuring high performance and reliability for your Next.js application. With their Cloud VPS, you can easily scale resources as your application grows, providing an optimal user experience.