Drupal is a mature and flexible content management system (CMS) trusted for building structured content models and managing complex workflows.
On the front end, Next.js is a widely adopted React framework known for its speed, developer experience, and production-grade features. With the release of Next.js 15, the new App Router brings powerful updates, including built-in support for async/streaming, granular caching, and improved routing patterns.
When connecting a decoupled Drupal backend to a Next.js 15 frontend, handling authentication becomes a key step, especially for gated content, personalisation, or editorial workflows.
This blog covers how to implement authentication in a headless Drupal + Next.js 15 setup using the latest App Router features and best practices around API routes, sessions, and token handling.
Why integrate Drupal with Next.js?
Setting up Next.js 15 with App Router
Create a Next.js application
Before starting, ensure you have Node.js installed. Then, run the following command to create a new Next.js 15 project:
To start the development server:
Your Next.js app should now be running at http://localhost:3000.
Basic Project Structure
Setting Up Drupal as a Headless CMS
Install Drupal new setup
Install and configure Drupal JSON: API
To enable API-based communication between Next.js and Drupal, install the JSON: API module:
Enable CORS for API requests
To allow Next.js to access Drupal’s API, update services.yml:
Fetching Drupal data in Next.js 15 (Using Async and Cache)
Next.js 15 introduces improved async handling and caching. To fetch content from Drupal, install the required packages:
Set the variables
Update the image dome in next.config.ts file
Then, create a client to fetch data using the new fetch API with caching:
Rendering the fetched content in Next.js 15:
Conclusion
By integrating Drupal’s headless capabilities with Next.js 15 and its modern App Router, teams gain a powerful architecture that combines content flexibility with frontend performance.
Drupal continues to provide a structured, API-first backend for complex content models and editorial workflows, while Next.js 15 brings faster rendering through granular caching, improved async handling, and enhanced developer ergonomics.
This setup creates a future-ready foundation for scaling digital experiences. You can introduce personalisation, real-time updates, static generation for anonymous content, and even edge rendering with Next.js middleware, which also aligns well with the growing demand for composable architectures, enabling easy integration with third-party services like analytics, commerce, or AI-based recommendations.
As headless adoption grows, pairing Drupal with Next.js 15 offers a stable yet forward-looking path, supporting editorial flexibility, high performance, and extensibility for evolving digital products.