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:
- Install NodeSource repository:
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
- Install Node.js and npm:
apt install -y nodejs
- 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.
- Build the application:
npm run build
- 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.
- Install Nginx:
apt install -y nginx
- 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;
}
}
- Enable the Nginx configuration:
ln -s /etc/nginx/sites-available/my-next-app /etc/nginx/sites-enabled/
- Test the Nginx configuration:
nginx -t
- 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.
- Install PM2:
npm install -g pm2
- Start your application with PM2:
pm2 start npm --name "my-next-app" -- start
- 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.