Decoupled Drupal with Next.js Using Next-Drupal

Using Drupal in a Decoupled manner enables the creation of performant web applications. Technologies like Next.js, React, Gatsby, etc., are available today to create blazingly fast web applications that predominantly leverage content management systems as backends for their content. Getting started with building these static web applications can be quite time-consuming since setting up specifics takes a lot of effort.

At Axelerant, we recently faced the challenge of creating a Decoupled Drupal Frontend for our Worklog project using Next.js, in as little time as possible. The issue of getting started with Next.js and Drupal quickly was staring us until we got our hands on the Drupal Next module. Drupal Next module is a fantastic module that works in tandem with the Next-Drupal npm package for providing tighter integration between Next.js with Drupal and helps to get up and running very quickly. 

In this post, I will discuss what features are provided by Drupal Next Module and then give you an overview of the Worklog project and how we used the Next-Drupal npm package to bring data in our Next.js based Worklog application.

We won’t be setting up anything but only discussing the features of the Next Drupal Module and the Next-Drupal npm package that helped us achieve our goal quickly. If you want to set it up on your web application, the author of the Drupal Next module + Next-Drupal npm package has created an awesome guide to take you through the process of setting it up.

Drupal Next Module

Drupal Next Module adds a lot of features to Drupal that, when coupled with the Next-Drupal npm package, make developing web applications with Next.js a breeze. Some of the features that the Drupal Next module enables are listed below.

• Incremental static regeneration: This feature enables the propagation of content changes instantly in Next.js applications whenever new content is added, or existing content is modified.
• Iframe preview: This feature enables the preview of Drupal content in an iframe on the Drupal dashboard.
• Multi-sites preview: Using the Drupal Next module, we can register many Next.js applications in our Drupal backend. The Multi-sites preview enables Iframe preview features on all the sites.
• Supports revision previews, draft content, and content moderation: The feature allows previews of draft content using the Next.js preview mode.
• Extensible via plugins: Drupal Next module is pluggable, and it allows the addition of custom site resolvers and previewers. The documentation provides an example of how to add a custom site resolver and site previewer.

Worklog Project

We at Axelerant keep track of our yearly achievements, certifications, contributions, etc., using different platforms. This issue of things being scattered across platforms didn’t help us to showcase our work in a unified way. In order to solve this very issue, we created this Worklog platform which will serve as a single point of reference to our achievements, certifications, contributions, etc.

Content Types are used to model data in all Drupal-based projects. Similarly, the Worklog project also uses content types, we have a main Content-Type of Worklog which has one-to-many relationships with child entities like certifications, contributions, projects, recognitions, and certifications. These child entities are modeled as paragraphs in Drupal. Paragraphs is a content creation module. If you haven’t ever used that, I highly suggest you learn more about Paragraphs.

For accessing/modifying data in our Next.js Frontend we use JSON API. The JSON API provides endpoints for accessing any Drupal node and its relationships. In the Worklog project, our primary node work_log is accessed by the http://localhost/jsonapi/node/work_log endpoint.

For accessing related entities JSON API provides an include filter that allows us to load child entities. For adding new data we issue a POST request to the entity-specific endpoint, if the entity being added is a child entity e.g certification then we link that to the parent entity (work_log in this case) as a relationship by issuing another POST request.

Usage Of Next-Drupal

The Next-Drupal npm package has been created to work cohesively with the Drupal Next module. It provides helper methods that can be used with Next.js methods (getStaticPaths, getStaticProps and getServerSideProps) for loading content. The primary methods that we used to get data in our application are getResourceCollectionFromContext and getResourceFromContext.

getResourceCollectionFromContext allows querying a collection of a given entity type from Drupal, while on the other hand, getResourceFromContext allows querying of a single entity type from Drupal. The below examples show the usage of the two methods in our application:

1. getResourceFromContext

Get a worklog node.

2. getResourceCollectionFromContext

Get a collection of worklogs.

The Next-Drupal package automatically takes care of Authorization, thus making life easier on another front. Beyond these two methods, the Next-Drupal package provides other helper methods as well. Read more for a detailed look at all the available methods.

Conclusion

The aim of this post was to give an overview of how we achieved a quick integration of Next.js with Drupal, by using the Drupal Next module in conjunction with the Next-Drupal npm package. Find the source code of the application used in the example application.