feat: create revalidate route and plugin

Author: brijr

.env.example

@@ -1,2 +1,5 @@
 WORDPRESS_URL="https://wordpress.com"
 WORDPRESS_HOSTNAME="wordpress.com"
+
+# If using the revalidate plugin
+WORDPRESS_WEBHOOK_SECRET="your-secret-key-here"

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+CLAUDE.md

README.md

@@ -433,15 +433,15 @@ The WordPress API functions use a hierarchical cache tag system:
 
 1. **Install the WordPress Plugin:**
 
-   - Navigate to `wordpress/next-revalidate/`
-   - Create a zip file of the folder
+   - Navigate to the `/plugin` directory
+   - Use the pre-built `next-revalidate.zip` file or create a ZIP from the `next-revalidate` folder
    - Install and activate through WordPress admin
    - Go to Settings > Next.js Revalidation
    - Configure your Next.js URL and webhook secret
 
 2. **Configure Next.js:**
 
-   - Add `WORDPRESS_WEBHOOK_SECRET` to your environment variables
+   - Add `WORDPRESS_WEBHOOK_SECRET` to your environment variables (same secret as in WordPress plugin)
    - The webhook endpoint at `/api/revalidate` is already set up
    - No additional configuration needed
 
@@ -451,6 +451,16 @@ The WordPress API functions use a hierarchical cache tag system:
    - Next.js automatically revalidates the appropriate cache tags
    - Only affected content is updated, maintaining performance
 
+### Plugin Features
+
+The Next.js Revalidation plugin includes:
+
+- Automatic revalidation when posts, pages, categories, tags, authors, or media are modified
+- Settings page to configure your Next.js site URL and webhook secret
+- Manual revalidation option for full site refresh
+- Support for custom post types and taxonomies
+- Optional admin notifications for revalidation events
+
 ### Manual Revalidation
 
 You can also manually revalidate content using the `revalidateWordPressData` function:

app/api/revalidate/route.ts

@@ -0,0 +1,81 @@
+import { revalidateTag } from "next/cache";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+  try {
+    const requestBody = await request.json();
+    const secret = request.headers.get("x-webhook-secret");
+
+    // Validate webhook secret
+    if (secret !== process.env.WORDPRESS_WEBHOOK_SECRET) {
+      console.error("Invalid webhook secret");
+      return NextResponse.json(
+        { message: "Invalid webhook secret" },
+        { status: 401 }
+      );
+    }
+
+    // Extract content type and ID from the webhook payload
+    const { contentType, contentId } = requestBody;
+
+    if (!contentType) {
+      return NextResponse.json(
+        { message: "Missing content type" },
+        { status: 400 }
+      );
+    }
+
+    // Determine which tags to revalidate
+    const tagsToRevalidate = ["wordpress"];
+
+    // Add content type specific tag
+    if (contentType === "post") {
+      tagsToRevalidate.push("posts");
+      if (contentId) {
+        tagsToRevalidate.push(`post-${contentId}`);
+      }
+    } else if (contentType === "page") {
+      tagsToRevalidate.push("pages");
+      if (contentId) {
+        tagsToRevalidate.push(`page-${contentId}`);
+      }
+    } else if (contentType === "category") {
+      tagsToRevalidate.push("categories");
+      if (contentId) {
+        tagsToRevalidate.push(`category-${contentId}`);
+      }
+    } else if (contentType === "tag") {
+      tagsToRevalidate.push("tags");
+      if (contentId) {
+        tagsToRevalidate.push(`tag-${contentId}`);
+      }
+    } else if (contentType === "author" || contentType === "user") {
+      tagsToRevalidate.push("authors");
+      if (contentId) {
+        tagsToRevalidate.push(`author-${contentId}`);
+      }
+    } else if (contentType === "media") {
+      tagsToRevalidate.push("media");
+      if (contentId) {
+        tagsToRevalidate.push(`media-${contentId}`);
+      }
+    }
+
+    // Revalidate all determined tags
+    for (const tag of tagsToRevalidate) {
+      console.log(`Revalidating tag: ${tag}`);
+      revalidateTag(tag);
+    }
+
+    return NextResponse.json({
+      revalidated: true,
+      message: `Revalidated tags: ${tagsToRevalidate.join(", ")}`,
+    });
+  } catch (error) {
+    console.error("Revalidation error:", error);
+    return NextResponse.json(
+      { message: "Error revalidating content" },
+      { status: 500 }
+    );
+  }
+}

plugin/README.md

@@ -0,0 +1,53 @@
+# Next.js WordPress Revalidation Plugin
+
+This plugin enables automatic revalidation of your Next.js site when content is changed in WordPress.
+
+## Installation
+
+1. Upload the `next-revalidate.zip` file through the WordPress admin plugin installer, or
+2. Extract the `next-revalidate` folder to your `/wp-content/plugins/` directory
+3. Activate the plugin through the WordPress admin interface
+4. Go to Settings > Next.js Revalidation to configure your settings
+
+## Configuration
+
+### 1. WordPress Plugin Settings
+
+After installing and activating the plugin:
+
+1. Go to Settings > Next.js Revalidation in your WordPress admin
+2. Enter your Next.js site URL (without trailing slash)
+3. Create a secure webhook secret (a random string)
+4. Save your settings
+
+### 2. Next.js Environment Variables
+
+Add the webhook secret to your Next.js environment variables:
+
+```bash
+# .env.local
+WORDPRESS_WEBHOOK_SECRET="your-secret-key-here"
+```
+
+## How It Works
+
+1. When content in WordPress is created, updated, or deleted, the plugin sends a webhook to your Next.js API route
+2. The webhook contains information about the content type (post, page, category, etc.) and ID
+3. The Next.js API validates the request using the secret and revalidates the appropriate cache tags
+4. Your Next.js site will fetch new content for the affected pages
+
+## Features
+
+- Automatic revalidation for posts, pages, categories, tags, and media
+- Manual revalidation option through the admin interface
+- Secure webhook communication with your Next.js site
+- Optional admin notifications for revalidation events
+
+## Troubleshooting
+
+If revalidation isn't working:
+
+1. Check that your Next.js URL is correct in the plugin settings
+2. Verify the webhook secret matches in both WordPress and Next.js
+3. Check your server logs for any errors in the API route
+4. Enable notifications in the plugin settings to see revalidation status

plugin/next-revalidate.zip

@@ -0,0 +1,64 @@
+=== Next.js Revalidation ===
+Contributors: 9d8
+Tags: next.js, headless, revalidation, cache
+Requires at least: 5.0
+Tested up to: 6.4
+Stable tag: 1.0.0
+Requires PHP: 7.2
+License: GPLv2 or later
+License URI: https://www.gnu.org/licenses/gpl-2.0.html
+
+Automatically revalidate your Next.js site when WordPress content changes.
+
+== Description ==
+
+Next.js Revalidation is a WordPress plugin designed to work with the `next-wp` Next.js starter template. It triggers revalidation of your Next.js site's cache whenever content is added, updated, or deleted in WordPress.
+
+The plugin sends webhooks to your Next.js site's revalidation API endpoint, ensuring your headless frontend always displays the most up-to-date content.
+
+**Key Features:**
+
+* Automatic revalidation when posts, pages, categories, tags, authors, or media are modified
+* Settings page to configure your Next.js site URL and webhook secret
+* Manual revalidation option for full site refresh
+* Support for custom post types and taxonomies
+* Optional admin notifications for revalidation events
+
+== Installation ==
+
+1. Upload the `next-revalidate` folder to the `/wp-content/plugins/` directory
+2. Activate the plugin through the 'Plugins' menu in WordPress
+3. Go to Settings > Next.js Revalidation to configure your Next.js site URL and webhook secret
+
+== Configuration ==
+
+1. Visit Settings > Next.js Revalidation in your WordPress admin
+2. Enter your Next.js site URL without a trailing slash (e.g., https://your-site.com)
+3. Enter the webhook secret which should match the WORDPRESS_WEBHOOK_SECRET in your Next.js environment
+4. Optionally enable admin notifications for revalidation events
+5. Click "Save Settings"
+
+== Frequently Asked Questions ==
+
+= What is the webhook secret for? =
+
+The webhook secret provides security for your revalidation API endpoint. It ensures that only your WordPress site can trigger revalidations.
+
+= How do I set up my Next.js site for revalidation? =
+
+Your Next.js site needs an API endpoint at `/api/revalidate` that can process the webhook payloads from this plugin. 
+See the README in your Next.js project for more details.
+
+= Does this work with custom post types? =
+
+Yes, the plugin automatically detects and handles revalidation for custom post types and taxonomies.
+
+== Changelog ==
+
+= 1.0.0 =
+* Initial release
+
+== Upgrade Notice ==
+
+= 1.0.0 =
+Initial release of the Next.js Revalidation plugin.

plugin/next-revalidate/README.txt

@@ -0,0 +1,2 @@
+<?php
+// Silence is golden.