Next.js is a popular open-source React framework used to build server-side rendering and static web applications. It offers a fast, efficient, and scalable solution for modern web development. In this guide, we will show you how to install Next.js on Ubuntu 22.04. Hosting your Next.js application on a WindowsVPS ensures better performance, control, and scalability, making it an ideal choice for high-traffic applications running on a VPS server.

Step 1: Update Your VPS Server

Before installing Next.js, make sure your VPS server is up to date. Run the following commands to update your system:

sudo apt update && sudo apt upgrade -y

Running Next.js on a WindowsVPS ensures that your application benefits from dedicated resources, offering improved performance and scalability as your traffic grows.

Step 2: Install Node.js

Next.js is built using Node.js, so you’ll need to install Node.js before setting up Next.js. Install Node.js using the following commands:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

Once installed, verify the Node.js installation by checking the version:

node -v

You should see Node.js 18.x or a later version installed.

Step 3: Install Next.js

With Node.js installed, you can now set up your Next.js application. First, create a new directory for your project:

mkdir ~/nextjs-app && cd ~/nextjs-app

Use the Create Next App command to set up a new Next.js project:

npx create-next-app@latest .

This command will generate the basic Next.js structure in the current directory. Follow the prompts to configure your new application.

Step 4: Start the Next.js Development Server

After setting up your project, you can start the Next.js development server using the following command:

npm run dev

Next.js will start the development server on http://localhost:3000. You can access your application by navigating to http://your-server-ip:3000 in your browser.

Step 5: Configure Next.js for Production

When deploying Next.js in a production environment, you need to build the project and start it in production mode. Run the following commands to build and start the project:

npm run build
npm start

The npm run build command optimizes your Next.js application for production by compiling all files, and npm start launches the application in production mode.

Step 6: Set Up a Process Manager (Optional)

To ensure that your Next.js application runs continuously and restarts automatically in case of a crash, you can use a process manager like PM2. Install PM2 globally by running:

sudo npm install pm2 -g

Next, start your application using PM2:

pm2 start npm --name "nextjs-app" -- run start

PM2 will keep your Next.js application running in the background, and you can manage it using the following commands:

• Check the status of your application:

pm2 status

• Restart your application:

pm2 restart nextjs-app

• Stop your application:

pm2 stop nextjs-app

Step 7: Configure Nginx as a Reverse Proxy (Optional)

For a production-ready deployment, it is common to configure Nginx as a reverse proxy to handle HTTP traffic and forward requests to your Next.js application running on port 3000. Install Nginx using the following command:

sudo apt install nginx -y

Once installed, create a new Nginx configuration file for your application:

sudo nano /etc/nginx/sites-available/nextjs

Add the following configuration, replacing your-domain.com with your actual domain or server IP address:

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    error_log /var/log/nginx/nextjs-error.log;
    access_log /var/log/nginx/nextjs-access.log;
}

Save the file and exit the editor. Enable the configuration by creating a symbolic link to sites-enabled:

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/

Test the Nginx configuration:

sudo nginx -t

If the test is successful, restart Nginx:

sudo systemctl restart nginx

Step 8: Optimize Your VPS Server for Next.js

To ensure that your Next.js application runs smoothly and can handle high traffic, hosting it on a WindowsVPS is highly recommended. A VPS server provides dedicated resources such as CPU, memory, and storage, allowing your application to scale efficiently and maintain optimal performance even under heavy traffic.

Conclusion

Next.js is a powerful framework for building modern web applications, and setting it up on Ubuntu 22.04 is a straightforward process. By hosting your application on a WindowsVPS, you gain better control, scalability, and performance, ensuring that your Next.js application can grow and handle increasing user demands seamlessly.

For more information about VPS hosting and optimizing your Next.js deployment, visit WindowsVPS today.