How to create Drupal and Next.js application with nginx

This blog describes how to create local dev setup using Drupal and Next.js with nginx.

Headless application with Drupal and Next.js is getting more popularity now a days. In this architecture we will use Druapl as backend to handle CMS part and to deliver REST APIs for front end application. Next.js is a react framework used to render front end pages.

Both are two different technologies and we need to use port 80 for both of them. This is the real challenge we are facing. The below paragraphs explaining how we can do this.

This demonstration is using docker and docker compose to build applications.

We need below dockers to build entire application:

1. nginx
2. Nodejs
3. Php
4. Mysql / MariaDB

Nginx is the server, we are using to run the applications. Node Js is required to run Next.Js. PHP and Mysql / MariaDB is required to run Drupal.

In nginx we can use server blocks to run different portals. We are using the same tips here to run our Drupal and next.js. Drupal will use fast_cgi_pass and Next.Js will use reverse proxy. We have to use two server blocks with two site names. Eg: backend.staging and frontend.staging. These site names you can configure on your hosts file /etc/hosts on Mac.

http {

    server {

    listen  80;

    server_name backend.staging;

    location ~ '\.php$|^/update.php' {

        fastcgi_pass php:9000;

    }

    server {

    listen  80;

    server_name frontend.staging;

    location / {

        proxy_pass       http://nodejs:3000;

    }

    }

}

The above code using php on port 9000 and Next.Js on port 3000. If we are checking http://backend.staging on browser, it will open Drupal and frontend.staging will open Next.js.