Next.js Drupal Marketing Site

example-marketing is a Next.js marketing site example that renders every page from content stored in Drupal and delivered over JSON:API, and it ships inside the chapter-three/next-drupal project. It is a working reference implementation rather than an empty starter: pages are built from the Drupal Landing page node type plus paragraphs, all sourced from the /drupal endpoint, and the result is viewable at https://demo.next-drupal.org.

What is the Drupal marketing site example?

example-marketing is an example marketing site built with Next.js that renders pages composed entirely from Drupal content exposed through JSON:API. Instead of hard-coding copy into the front end, the template reads the Drupal Landing page node type and its paragraphs from the /drupal endpoint and renders them as marketing pages. It is published by the next-drupal project (chapter-three/next-drupal) under the MIT license, and a live build is hosted at https://demo.next-drupal.org.

What makes it stand out?

• Next.js front end — the marketing pages are React components rendered by Next.js, consuming structured content rather than static markup.
• Drupal as the content source — content comes from Drupal through JSON:API, so editors change copy and layout in Drupal and the site reflects it.
• Landing page node type plus paragraphs — pages are assembled from a Landing page node and its attached paragraphs, which is how the demo site's sections are produced.
• Single content endpoint — all content is fetched from the /drupal path, keeping the data layer simple to point at another Drupal instance.
• Live demo — https://demo.next-drupal.org shows the template running against a real Drupal backend.
• MIT license — the code is free to copy and modify, with the license text stored in the next-drupal repository.
• Part of a larger decoupled toolkit — the surrounding next-drupal project advertises SSG, SSR and ISR, multi-site, authentication, webforms, Search API, i18n and preview mode, with both JSON:API and GraphQL support, so this example demonstrates one slice of that feature set.

Who should use the Drupal marketing site example?

• Drupal developers going headless: use it as a working reference for how Landing page nodes and paragraphs map onto a Next.js front end over JSON:API.
• Next.js developers integrating Drupal: wiring a front end to a JSON:API endpoint is a lot of plumbing, and this example shows the wiring already done.
• Agencies evaluating next-drupal: the hosted demo at demo.next-drupal.org lets a team judge the editorial workflow before committing to a decoupled build.
• Teams prototyping a decoupled marketing site: copy the example and repoint the /drupal endpoint at your own Drupal installation to get a first draft quickly.

What can you do with it?

• Ship a Drupal-driven landing page: define the Landing page node and its paragraphs in Drupal, and the Next.js front end renders those sections as marketing content.
• Hand page structure to editors: because sections come from paragraphs, marketers rearrange and rewrite sections in Drupal without a front-end deploy.
• Test a decoupled migration: point the /drupal endpoint at a staging Drupal site to see how existing content behaves in a Next.js front end.
• Learn the next-drupal pattern: read the example alongside the wider next-drupal feature set (preview mode, i18n, Search API, authentication) to plan a larger build.

How does it work?

The template issues requests to a Drupal JSON:API endpoint mounted at /drupal, retrieves the Landing page node and its paragraphs, then renders those structured fields as Next.js page sections. The published demo at https://demo.next-drupal.org runs that same flow against a live Drupal backend, so the front end contains layout and presentation logic while Drupal holds the text and structure.

Is the Drupal marketing site example free?

Yes. It is licensed under the MIT license, and the license file lives in the next-drupal repository at chapter-three/next-drupal. That permits commercial and private use, modification and redistribution, provided the license notice is kept.

What does it use for content?

Content is not stored in the front end. Pages are built from the Drupal Landing page node type and paragraphs, retrieved over JSON:API from the /drupal endpoint, so a Drupal site is the system of record for everything the pages display.

Can I see it running?

Yes. A hosted version of this example is published at https://demo.next-drupal.org, which renders the Drupal-sourced landing pages through the Next.js front end.

Does it use JSON:API or GraphQL?

This example uses JSON:API. The wider next-drupal project states that it works with both JSON:API and GraphQL, so GraphQL is an option in the library even though this particular marketing example is wired to JSON:API.

Do I need my own Drupal installation?

Yes. The template is a front end that consumes Drupal data, so it needs a Drupal backend exposing the Landing page node type, paragraphs and a JSON:API endpoint to render real content.