| Choose between decoupled approaches |
Decoupled Architecture Decision |
Choose decoupled Drupal with Next.js when you need modern frontend performance, independent backend/frontend development teams, or flexibility to serve multiple frontends from one Drupal backend. |
| Decide on JSON:API vs GraphQL |
JSON:API vs GraphQL Decision |
Both JSON:API and GraphQL work with next-drupal. JSON:API is simpler and built into Drupal core. |
| Set up Drupal for Next.js |
Drupal Setup |
Follow this workflow when setting up a new Drupal backend for Next.js or adding Next.js support to an existing Drupal site. |
| Initialize a Next.js project |
Next.js Project Setup |
Use when creating a new Next.js frontend for an existing Drupal backend. App Router (Next.js 13+) is recommended over Pages Router. |
| Configure the NextDrupal client |
NextDrupal Client Configuration |
Configure the NextDrupal client to customize API prefix, authentication, caching, deserialization, and other client behaviors. |
| Set up authentication |
Authentication Patterns |
Authentication is required for draft mode, creating/updating content, and accessing unpublished resources. Choose the pattern based on your security requirements and Drupal configuration. |
| Fetch content from Drupal |
Fetching Content |
Fetch JSON:API resources from Drupal for rendering in Next.js pages. All methods support filtering, sorting, includes, and sparse fieldsets. |
| Build static or server-rendered pages |
Building Pages |
Build statically generated (SSG), server-rendered (SSR), or incrementally static regenerated (ISR) pages from Drupal content. App Router uses native fetch with Next.js cache options. |
| Enable preview/draft mode |
Draft Mode |
Enable content editors to preview unpublished content and revisions in an iframe within Drupal before publishing. |
| Configure on-demand revalidation |
On-Demand Revalidation |
Automatically update Next.js cached pages when content is created, updated, or deleted in Drupal. Supports path-based and tag-based revalidation. |
| Handle images and media |
Media and Images |
Handle Drupal media entities, image fields, and inline images in body fields using Next.js Image component for optimization. |
| Support multiple languages |
Multilingual Support |
Support multiple languages in your Next.js site backed by multilingual Drupal content. |
| Integrate search functionality |
Search Integration |
Implement search functionality using Drupal Search API exposed via JSON:API. |
| Handle webform submissions |
Webform Integration |
Submit webforms from Next.js to Drupal using the Webform REST module. Supports client-side and server-side (API route) submission. |
| Configure environment variables |
Environment Variables |
Configure Next.js connection to Drupal, authentication credentials, and feature flags using environment variables. |
| Secure my implementation |
Security Best Practices |
Follow these practices for all Next.js + Drupal implementations to prevent common security vulnerabilities. |
| Optimize performance |
Performance Optimization |
Apply these optimizations to reduce build times, improve page load speed, and minimize API requests. |
| Troubleshoot common issues |
Troubleshooting |
Diagnose and resolve common issues when integrating Next.js with Drupal. |
| Check sources and references |
Sources & Maintenance |
|