How to Run Both WordPress and a Next.js Site Side by Side on the Same Server"

Prerequisites

• A server with root access (e.g., a VPS or a dedicated server).
• NGINX, Node.js and npm installed on the server.
• PHP and MySQL installed for WordPress.
• A domain name pointed to your server's IP address.
• Basic knowledge of SSH and command line operations.

Step 1: Set Up Your Server Environment

1. Update Your Server

Ensure your server is up-to-date.

sudo apt update
sudo apt upgrade -y

2. Install Nginx

Nginx will serve as the web server and reverse proxy.

sudo apt install nginx -y

3. Install MySQL

MySQL is required for WordPress.

sudo apt install mysql-server -y
sudo mysql_secure_installation

4. Install PHP

PHP is required for WordPress.

sudo apt install php-fpm php-mysql -y

5. Install Node.js and npm

Node.js and npm are required for Next.js.

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

Step 2: Set Up WordPress

1. Download and Configure WordPress

cd /var/www
sudo mkdir wordpress
cd wordpress
sudo wget https://wordpress.org/latest.tar.gz
sudo tar -xvzf latest.tar.gz
sudo mv wordpress/\* .
sudo rm latest.tar.gz
sudo rm -rf wordpress

2. Create a MySQL Database for WordPress

sudo mysql -u root -p

Inside the MySQL shell:

CREATE DATABASE wordpress;
CREATE USER 'wordpressuser'@'localhost' IDENTIFIED BY 'yourpassword';
GRANT ALL PRIVILEGES ON wordpress.\* TO 'wordpressuser'@'localhost';
FLUSH PRIVILEGES;
EXIT;

3. Configure WordPress

sudo cp wp-config-sample.php wp-config.php
sudo nano wp-config.php

Edit the database settings:

define('DB_NAME', 'wordpress');
define('DB_USER', 'wordpressuser');
define('DB_PASSWORD', 'yourpassword');
define('DB_HOST', 'localhost');

4. Set Permissions

sudo chown -R www-data:www-data /var/www/wordpress
sudo chmod -R 755 /var/www/wordpress

5. Configure Nginx for WordPress

Create an Nginx configuration file for WordPress.

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

Add the following configuration:

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/wordpress;
    index index.php index.html index.htm;

    location / {
        try_files $uri $uri/ /index.php?$args;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    }

    location ~ /\.ht {
        deny all;
    }
}

Enable the configuration and restart Nginx:

sudo ln -s /etc/nginx/sites-available/wordpress /etc/nginx/sites-enabled/
sudo systemctl restart nginx

Step 3: Set Up Next.js

1. Create a Next.js Application

cd /var/www
sudo mkdir nextjs
cd nextjs
npx create-next-app@latest .

2. Build the Next.js Application

npm install
npm run build

3. Start the Next.js Application

npm start

4. Configure Nginx for Next.js

Create an Nginx configuration file for Next.js.

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

Add the following configuration:

server {
    listen 80;
    server_name next.yourdomain.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 Host $host;
        proxy_cache_bypass $http_upgrade;
    }

}

Enable the configuration and restart Nginx:

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

Step 4: Manage DNS Records

Ensure that your domain’s DNS records are set correctly:

1. A Record: Point yourdomain.com to your server’s IP address for WordPress.
2. A Record: Point next.yourdomain.com to your server’s IP address for Next.js.

Step 5: Final Steps

1. WordPress Installation: Navigate to https://yourdomain.com to complete the WordPress installation through the web interface.
2. Next.js Access: Navigate to https://next.yourdomain.com to access your Next.js application.

Conclusion

You now have both WordPress and a Next.js site running side by side on the same server. This setup allows you to use WordPress for content management and Next.js for a modern, performant frontend. You can further enhance this setup by using SSL certificates (e.g., via Let’s Encrypt) to secure your sites, and by implementing additional Nginx configurations for optimization and security.