Question

Hosting Next.js on a Droplet with Existing WordPress Installation

Posted on July 27, 2024
Next.js WordPress Droplets
Asked by MassiveLightSeaGreenUrchin

Hi,

I have a Droplet with WordPress set up and running smoothly. Now, I’d like to host a Next.js application on the same Droplet. I’ve tried various approaches but seem to be stuck. Could you provide a guide or recommend an article to help me with this setup?

Thank you!

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

KFSys

Site Moderator

• July 28, 2024

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!