How to Run Both WordPress and a Next.js Site Side by Side on the Same Server"
![Replicating you data in multiple locations - Jack Ridgway](https://www.jackridgway.co.uk/static/images/next-js-wordpress.webp?w=256&q=75)
Running both WordPress and a Next.js site on the same server allows you to leverage the strengths of both platforms. WordPress is great for content management, while Next.js offers modern frontend capabilities. Here’s a step-by-step guide on how to set this up.
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:
- A Record: Point yourdomain.com to your server’s IP address for WordPress.
- A Record: Point next.yourdomain.com to your server’s IP address for Next.js.
Step 5: Final Steps
- WordPress Installation: Navigate to https://yourdomain.com to complete the WordPress installation through the web interface.
- 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.