next_tag_revalidator

Next.js Tag Revalidator

Provides, configurable cache tag-based revalidation for Next.js applications using Drupal as a headless CMS. When content changes in Drupal, this module automatically tells your Next.js app which specific pages to refresh, giving you precise control over cache invalidation.

Features

Basic Functionality: This module integrates with the Next.js module to provide intelligent cache invalidation. When content is created, updated, or deleted in Drupal, it automatically tells your Next.js application to refresh specific pages based on cache tags.

Unique Features:

• Granular Control: Choose exactly which cache tags to revalidate (individual entities, content type lists, or custom tags)
• Bundle-Specific Tags: Generates proper cache tags like node_list:article and taxonomy_list:categories that Next.js applications need
• Context-Aware UI: Configuration forms show relevant examples based on your content types
• Performance Optimized: Send only the cache tags you need, reducing unnecessary revalidation
• Individual Requests: Makes separate HTTP requests per cache tag for better debugging

When to Use:

• Building a headless Drupal site with Next.js frontend
• Need precise control over which pages get revalidated when content changes
• Want to optimize cache invalidation performance
• The core Next.js module's cache tag revalidator doesn't meet your needs

Post-Installation

1. Enable the Module: drush en next_tag_revalidator
2. Configure Next.js Sites: Go to Configuration → Web Services → Next.js sites
3. Edit Your Site: Click "Edit" on your Next.js site configuration
4. Add Revalidator: Click "Add revalidator" and select "Next.js Cache Tag"
5. Configure Options: Choose which cache tags to revalidate:
   • Individual entity tags (node:123)
   • Entity list tags (node_list:article)
   • Custom additional tags
6. Tag Your Next.js Pages: Use the generated cache tags in your Next.js fetch() calls

Additional Requirements

• Drupal 10 or 11
• Next.js module - Provides the base Next.js integration
• Next.js application configured with revalidation endpoints

Similar projects

Core Next.js Module Cache Tag Revalidator:

The base Next.js module includes a "Cache Tag" revalidator, but it has limitations:

• No configuration options for cache tags
• node_list:[node_bundle]. See git issue https://github.com/chapter-three/next-drupal/issues/848
• Sends all tags in one request, making debugging difficult
• No way to add custom cache tags

This module addresses these limitations with configurable, optimized cache tag revalidation designed specifically for Next.js applications.

Supporting this Module

This module is developed as an open-source community project. You can support development by:

• Reporting bugs and feature requests
• Contributing code improvements
• Sharing your use cases and feedback
• Helping with documentation

Community Documentation

• Next.js for Drupal Documentation - Complete guide to headless Drupal with Next.js
• Next.js ISR Documentation - Understanding Incremental Static Regeneration
• Drupal Cache Tags - How Drupal's cache tag system works

Usage Examples

Tag your Next.js pages/components with the appropriate cache tags:

// Individual entities
export default async function Article({ params }) {
  const article = await fetch(`${drupalUrl}/jsonapi/node/article/${params.id}`, {
    next: { tags: [`node:${params.id}`] }
  });
  // ...
}

// Entity lists
export default async function ArticleList() {
  const articles = await fetch(`${drupalUrl}/jsonapi/node/article`, {
    next: { tags: ['node_list:article'] }
  });
  // ...
}

// Custom tags
export default async function HomePage() {
  const data = await fetch(`${drupalUrl}/api/homepage-data`, {
    next: { tags: ['homepage', 'config:system.menu.main'] }
  });
  // ...
}

Cache Tag Patterns

Entity Type Individual Tag List Tag Node node:123 node_list:article Taxonomy Term taxonomy_term:456 taxonomy_list:tags User user:789 user_list:user Custom Entity my_entity:101 my_entity_list:my_bundle