Next Drupal Basic Starter

Next Drupal Basic Starter is a boilerplate template that pairs Next.js with Drupal as a headless CMS, providing a pre-configured front end for decoupled Drupal sites.

What is Next Drupal Basic Starter?

Next Drupal Basic Starter is a GitHub template from the Chapter Three team, creators of next-drupal.org. It scaffolds a Next.js application that connects to a Drupal backend through environment variables, allowing content managed in Drupal to be rendered in a React-based front end. The template is designed as a minimal starting point for decoupled Drupal projects, with the core integration logic already wired up, so developers can focus on building their site rather than configuration.

Key Features

• Next.js framework — Built on Next.js with React and file-based routing, supporting server-side rendering and static generation out of the box.
• Drupal integration — Connects to a Drupal instance using environment variables for the base URL, image domain, and authentication credentials, enabling decoupled content delivery.
• Tailwind CSS styling — Ships with Tailwind CSS and PostCSS configured, giving utility-first styles without extra build setup.
• One-command scaffolding — Install with npx create-next-app -e https://github.com/chapter-three/next-drupal-basic-starter.
• Vercel deployment button — One-click deploy that pre-fills required environment variables and links to a live demo at demo.next-drupal.org.
• Documented environment variables — Requires NEXT_PUBLIC_DRUPAL_BASE_URL, NEXT_IMAGE_DOMAIN, DRUPAL_CLIENT_ID, and DRUPAL_CLIENT_SECRET, with links to full documentation.
• Official documentation — Supported by next-drupal.org, which covers setup, environment variables, and architecture.

Who is it for?

• Drupal developers — Build modern front ends with Next.js while keeping Drupal as the content management system.
• Teams decoupling an existing Drupal site — Use this starter as a foundation to gradually move a traditional Drupal theme to a headless setup.
• Evaluators of headless CMS architectures — A minimal, working example to compare Next.js and Drupal integration against other CMS starters.

What can you do with it?

• Launch a new front end — Scaffold a Next.js site connected to a Drupal backend with one command.
• Deploy to Vercel — Use the deploy button to spin up a live site with demo content, pre-configuring the necessary environment variables.
• Learn decoupled architecture — Study the boilerplate code to see how Next.js fetches and renders content from Drupal through the configured API.

How does it work?

Run the npx command to create a project from the template. Set the required environment variables to point at your Drupal instance, including the base URL, image domain, and OAuth client ID and secret. Once configured, the site will fetch Drupal content and render it as a Next.js application, ready for further customization.

FAQ

Is Next Drupal Basic Starter free?

Yes, the template is available on GitHub, so you can download, modify, and deploy it without paying licensing fees. The only costs are the hosting and Drupal infrastructure you choose.

What environment variables does the starter need?

It expects NEXT_PUBLIC_DRUPAL_BASE_URL for the Drupal site URL, NEXT_IMAGE_DOMAIN for image domains, plus DRUPAL_CLIENT_ID and DRUPAL_CLIENT_SECRET for API access. The Vercel deploy flow prompts for these values.

Can I use this for an existing Drupal site?

Yes, as long as your Drupal instance exposes the expected API endpoints. You will need to set the base URL and authentication credentials to match your Drupal backend.

Does the starter include styling?

It includes Tailwind CSS and PostCSS configuration, so utility-first CSS classes are available immediately. You can extend or remove the styling stack as needed.

Where is the documentation?

The official documentation lives at next-drupal.org, with environment variable reference, API details, and deployment guides referenced directly from the repository readme.