What it is

Next.js for Drupal is a TypeScript toolkit for building a decoupled front-end for a Drupal site using Next.js. It ships the NextDrupal client class, which talks to Drupal through JSON:API or GraphQL, and it carries the MIT license. The project lives in the Drupal and Next.js ecosystems at once: it publishes as a Next.js plugin (next-plugin) and pairs with companion Drupal modules, which is why the repository also carries the drupal-modules topic.

The concrete problem it solves is the gap between a Drupal content back end and a modern React front end. Drupal stores and structures content, but rendering it through Next.js normally means hand-writing data fetching, routing, preview handling, and translation plumbing. Next.js for Drupal supplies that layer, so a page can pull a content collection by bundle name — for example getResourceCollectionFromContext("node--article", context) — and render it without bespoke glue code.

Key capabilities

• Static site generation, server-side rendering, and incremental static regeneration as supported rendering modes.
• Data access through both JSON:API and GraphQL, selected by the developer.
• Multi-site support for serving several Drupal sites from one front end.
• Authentication handling for requests that require a logged-in Drupal user.
• Webform integration, so Drupal webforms can be submitted from the Next.js front end.
• Search API support for querying indexed Drupal content.
• Internationalization and preview mode, allowing editors to review unpublished content before publication.

Who uses it and how

• Teams running a Drupal editorial back end while presenting content through a separate Next.js application.
• Projects that need editor preview of unpublished Drupal content, using the built-in preview mode.
• Multilingual or multi-site publishers, using the i18n and multi-site capabilities against one or more Drupal installs.
• Site owners who deploy the front end to Vercel, following the "Deploy to Vercel" flow from the basic starter repository.
• Developers starting from the basic starter, which requires the NEXT_PUBLIC_DRUPAL_BASE_URL and NEXT_IMAGE_DOMAIN environment variables.

Getting started

The README shows usage through the next-drupal package import, instantiating new NextDrupal("https://cms.next-drupal.org") and fetching resources inside getStaticProps. A one-click "Deploy to Vercel" button clones the basic starter, and full documentation lives at next-drupal.org, with a live demo at demo.next-drupal.org.

When to use it — and when not to

Choose it when the content already lives in Drupal and the front end must be Next.js with preview, search, forms, and translation handled

import { NextDrupal } from "next-drupal"

const drupal = new NextDrupal("https://cms.next-drupal.org")

export default function BlogPage({ articles }) {
  return (
    <div>
      {articles?.length
        ? nodes.map((node) => (
            <div key={node.id}>
              <h1>{node.title}</h1>
            </div>
          ))
        : null}
    </div>
  )
}

export async function getStaticProps(context) {
  const articles = await drupal.getResourceCollectionFromContext(
    "node--article",
    context
  )

  return {
    props: {
      articles,
    },
  }
}