Hosting Next.js on a Droplet with Existing WordPress Installation

Heya @massivelightseagreenurchin,

It really depends on what WebService you are using - Nginx/Apache.

Since Next.js uses nodejs it runs on a specific port. You’ll need to create a reverse proxy to server your app. Both are applicable and usable with that it just depends on what you are using.

If you are using Nginx, you’ll need to create the following Nginx conf:

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

    # WordPress
    location / {
        proxy_pass http://127.0.0.1:8080; # Assuming your WordPress is running on port 8080
        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;
    }

    # Next.js
    location /nextjs/ {
        proxy_pass http://127.0.0.1:3000; # Assuming your Next.js is running on port 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;
        rewrite ^/nextjs/(.*)$ /$1 break;
    }

    # SSL settings if you have SSL configured
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your-domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your-domain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

Here is an example config if you are using Apache

<VirtualHost *:80>
    ServerName your-domain.com
    ServerAlias www.your-domain.com

    # Redirect all HTTP traffic to HTTPS
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R=301,L]

    # Proxy settings for WordPress
    ProxyPreserveHost On
    ProxyPass / http://127.0.0.1:8080/
    ProxyPassReverse / http://127.0.0.1:8080/
</VirtualHost>

<VirtualHost *:443>
    ServerName your-domain.com
    ServerAlias www.your-domain.com

    # SSL configuration
    SSLEngine on
    SSLCertificateFile /etc/letsencrypt/live/your-domain/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/your-domain/privkey.pem
    Include /etc/letsencrypt/options-ssl-apache.conf

    # Proxy settings for WordPress
    ProxyPreserveHost On
    ProxyPass / http://127.0.0.1:8080/
    ProxyPassReverse / http://127.0.0.1:8080/

    # Proxy settings for Next.js
    ProxyPass /nextjs/ http://127.0.0.1:3000/
    ProxyPassReverse /nextjs/ http://127.0.0.1:3000/
    RewriteRule ^/nextjs/(.*) /$1 [PT,L]
</VirtualHost>

Hope this helps!

Heya,

I would like to recommend you to check the droplet’s performance once both Next.js and the WordPress site are under traffic to ensure the droplet’s resources are enough to handle both applications.

Both WordPress and Next.js can be resource-intensive, particularly if your site has high traffic. If one application consumes too much CPU or RAM, it can negatively impact the performance of the other. This might lead to slow page load times, increased server response times, or even downtime if the server becomes overloaded.

Also running two applications means more disk space usage for files, databases, logs, and backups. Ensure your Droplet has sufficient disk space, especially if you have a media-rich WordPress site or a large Next.js build.

Hope that this helps!