Decoupled Drupal with Next.js Using Next-Drupal

Introduction

Using Drupal in a decoupled manner empowers the creation of high-performance web applications. Technologies like Next.js, React, Gatsby, and more are available today, enabling the development of blazingly fast web applications that primarily rely on content management systems as backends for their content.

Recently, we encountered the challenge of creating a decoupled Drupal frontend for our Worklog project using Next.js, with minimal time investment. The process of quickly starting with Next.js and Drupal was a daunting task until we discovered the Drupal Next module. Working seamlessly with the Next-Drupal npm package, the Drupal Next module provides enhanced integration between Next.js and Drupal, allowing us to set up and deploy our application rapidly.

In this post, I will delve into the features offered by the Drupal Next Module and provide an overview of the Worklog project. Additionally, I'll explain how we utilized the Next-Drupal npm package to seamlessly integrate data into our Next.js based Worklog application.

We'll focus solely on discussing the features of the Next Drupal Module and the Next-Drupal npm package that expedited our project. If you're interested in setting it up for your web application, the author of the Drupal Next module + Next-Drupal npm package has created an excellent guide to assist you through the setup process.

Drupal Next Module

The Drupal Next Module enriches Drupal with a host of features that seamlessly integrate with Next.js, simplifying web application development. When paired with the Next-Drupal npm package, these features enhance the efficiency and functionality of Drupal-powered Next.js applications.

Key Features:

1. Incremental Static Regeneration:

   This feature ensures real-time propagation of content changes within Next.js applications whenever new content is added or existing content is modified.

2. Iframe Preview:

   Preview Drupal content conveniently within an iframe on the Drupal dashboard, facilitating visualization of content changes.

3. Multi-sites Preview:

   Register multiple Next.js applications within the Drupal backend and extend iframe preview capabilities to all registered sites for efficient content management.

4. Support for Revision Previews, Draft Content, and Content Moderation:

   Preview draft content using the Next.js preview mode, ensuring comprehensive content review and moderation.

5. Extensibility via Plugins:

   The Drupal Next Module is highly extensible, allowing for the integration of custom site resolvers and previewers. Detailed documentation assists in the addition of custom functionalities to tailor the module to specific project requirements.

Worklog Project

We streamline the tracking of our yearly achievements, certifications, contributions, and more through various platforms. However, the scattered nature of these platforms hindered our ability to showcase our work in a unified manner. To address this issue, we developed the Worklog platform, serving as a centralized repository for all our achievements, certifications, contributions, and more.

In the Worklog project, we utilize content types, with the main Content-Type being Worklog. This main Content-Type establishes one-to-many relationships with child entities such as certifications, contributions, projects, recognitions, and certifications, all modeled as paragraphs in Drupal. If you're unfamiliar with Paragraphs, I highly recommend exploring its capabilities.

For accessing and modifying data in our Next.js frontend, we rely on the JSON API, which provides endpoints for accessing any Drupal node and its relationships. In the Worklog project, the primary node work_log is accessed through the http://localhost/jsonapi/node/work_log endpoint. The JSON API also offers an include filter to load related entities, and for adding new data, we issue POST requests to entity-specific endpoints, linking child entities to the parent entity (work_log) as relationships.

Usage Of Next-Drupal

The Next-Drupal npm package is specifically designed to work seamlessly with the Drupal Next module, enhancing the integration of Drupal with Next.js. It provides a set of helper methods that complement Next.js methods, such as getStaticPaths, getStaticProps, and getServerSideProps, facilitating the loading of content within Next.js applications.

Two primary methods offered by the Next-Drupal package for retrieving data from Drupal are getResourceCollectionFromContext and getResourceFromContext. The getResourceCollectionFromContext method enables querying a collection of a specified entity type from Drupal, while the getResourceFromContext method allows querying of a single entity type.

Example Usage:

1. getResourceFromContext:

   Retrieve a worklog node.

   import { getResourceFromContext } from "next-drupal"
                               
               export async function getServerSideProps(context) {
                 const worklog = await getResourceFromContext("node--work_log", context)
                 
                 return {
                   props: {
                     worklog,
                   },
                 }
               }

2. getResourceCollectionFromContext:

   Retrieve a collection of worklogs.

   import { getResourceCollectionFromContext } from "next-drupal"
                               
               export async function getStaticProps(context) {
                 const worklogs = await getResourceCollectionFromContext(
                   "node--work_log",
                   context
                 )
                 
                 return {
                   props:{
                     worklogs
                   },
                   revalidate: 1,
                 };
               }

In addition to these methods, the Next-Drupal package handles authorization automatically, simplifying development. For a comprehensive understanding of all available methods, refer to the package documentation.

Conclusion

The purpose of this post was to provide an overview of how we efficiently integrated Next.js with Drupal. We achieved this by utilizing the Drupal Next module in conjunction with the Next-Drupal npm package, enabling seamless communication between Drupal and Next.js.

To delve deeper into the integration process, you can explore the source code of the example application used in this post. By examining the code, you can gain further insights into the implementation details and understand how the integration was accomplished.