Add comprehensive example structure and navigation for Next.js 16

Major Improvements:
- Add Navigation component with links to all examples
- Create informative homepage explaining all features
- Improve layout with navigation and better structure
- Rename fetch-example to fetch-cache with detailed UI
- Add TTL/Expiration example with clear explanations
- Add API routes for tag and path revalidation
- Add EXAMPLES_TODO.md tracking remaining work

Examples Added/Improved:
- fetch-cache: Fetch caching with tags and time-based revalidation
- ttl-example: Demonstrates TTL behavior (stale/expire ages)
- API routes: /api/revalidate-tag and /api/revalidate-path

Structure Improvements:
- Navigation bar with all examples
- Consistent styling and layout
- Better error handling and user feedback
- Educational content explaining how each feature works

Remaining Work (see EXAMPLES_TODO.md):
- revalidate-tag/path UI pages
- use-cache-demo example
- Verify existing ISR/PPR/static-params examples
- Comprehensive Playwright tests
- Full documentation

Author: claude

examples/redis-minimal/EXAMPLES_TODO.md

@@ -0,0 +1,97 @@
+# Next.js 16 Cache Handler - Examples TODO
+
+This document tracks the completion status of all example implementations based on [PR #109](https://github.com/fortedigital/nextjs-cache-handler/pull/109).
+
+## Completed ✅
+
+- [x] Create navigation structure with shared layout
+- [x] Improve homepage with examples overview
+- [x] Rename fetch-example to fetch-cache and improve
+- [x] Add TTL/Expiration example
+- [x] Add revalidate-tag API route
+- [x] Add revalidate-path API route
+
+## In Progress 🚧
+
+### Core Feature Examples
+
+- [ ] **revalidate-tag page** - Interactive UI for testing tag revalidation
+- [ ] **revalidate-path page** - Interactive UI for testing path revalidation
+- [ ] **use-cache-demo** - Demonstrate Next.js 16 "use cache" directive
+- [ ] Verify and update **ISR example** (isr-example/blog/[id])
+- [ ] Verify and update **static-params-test**
+- [ ] Verify and update **PPR example**
+
+### Additional Examples Needed
+
+- [ ] **Multiple tags example** - Show revalidation with multiple tags
+- [ ] **Nested caching example** - Component-level caching
+- [ ] **Error handling example** - Cache behavior during errors
+- [ ] **Conditional caching example** - Dynamic cache decisions
+
+## Testing 🧪
+
+### Playwright E2E Tests
+
+- [ ] Test fetch-cache example
+  - [ ] Verify data is cached
+  - [ ] Verify TTL expiration
+  - [ ] Verify tag revalidation works
+- [ ] Test ISR example
+  - [ ] Verify static generation
+  - [ ] Verify dynamic params work
+  - [ ] Verify revalidation
+- [ ] Test TTL example
+  - [ ] Verify cache freshness
+  - [ ] Verify staleness behavior
+  - [ ] Verify expiration
+- [ ] Test tag revalidation
+  - [ ] Test single tag revalidation
+  - [ ] Test multiple tag revalidation
+  - [ ] Verify cascade effects
+- [ ] Test path revalidation
+  - [ ] Test single path revalidation
+  - [ ] Test layout revalidation
+  - [ ] Test nested path revalidation
+- [ ] Test "use cache" directive
+  - [ ] Verify component caching
+  - [ ] Verify it's separate from cache handler
+- [ ] Test PPR example
+  - [ ] Verify partial prerendering
+  - [ ] Verify dynamic/static mix
+- [ ] Test production build
+  - [ ] Verify all features work in production
+  - [ ] Verify Redis integration
+  - [ ] Verify cache persistence
+
+## Documentation 📚
+
+- [ ] Add comprehensive README for examples/
+- [ ] Document each example's purpose and behavior
+- [ ] Add troubleshooting section
+- [ ] Add Redis setup instructions
+- [ ] Document differences between Next.js 15 and 16 caching
+
+## Production Readiness 🚀
+
+- [ ] Verify instrumentation works correctly
+- [ ] Test with Redis in production mode
+- [ ] Test with LRU fallback
+- [ ] Performance benchmarking
+- [ ] Memory usage monitoring
+- [ ] Error handling and logging
+
+## Known Issues ⚠️
+
+From PR #109:
+- Tags may not save properly in development mode (needs verification)
+- Need to test all features in both dev and production modes
+
+## Next Steps
+
+1. Complete all remaining example pages
+2. Write comprehensive Playwright tests
+3. Add detailed documentation
+4. Test production builds
+5. Performance testing
+6. Create migration guide from Next.js 15 to 16

examples/redis-minimal/src/app/api/revalidate-path/route.ts

@@ -0,0 +1,22 @@
+import { revalidatePath } from "next/cache";
+import { NextRequest } from "next/server";
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const path = searchParams.get("path");
+
+  if (!path) {
+    return Response.json({ error: "Path parameter is required" }, { status: 400 });
+  }
+
+  try {
+    revalidatePath(path);
+    return Response.json({
+      revalidated: true,
+      path,
+      timestamp: new Date().toISOString()
+    });
+  } catch (error) {
+    return Response.json({ error: "Failed to revalidate" }, { status: 500 });
+  }
+}

examples/redis-minimal/src/app/api/revalidate-tag/route.ts

@@ -0,0 +1,22 @@
+import { revalidateTag } from "next/cache";
+import { NextRequest } from "next/server";
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const tag = searchParams.get("tag");
+
+  if (!tag) {
+    return Response.json({ error: "Tag parameter is required" }, { status: 400 });
+  }
+
+  try {
+    revalidateTag(tag);
+    return Response.json({
+      revalidated: true,
+      tag,
+      timestamp: new Date().toISOString()
+    });
+  } catch (error) {
+    return Response.json({ error: "Failed to revalidate" }, { status: 500 });
+  }
+}

examples/redis-minimal/src/app/fetch-cache/page.tsx

@@ -0,0 +1,88 @@
+export const metadata = {
+  title: "Fetch Cache Example",
+};
+
+export default async function FetchCachePage() {
+  const timestamp = new Date().toISOString();
+
+  try {
+    const characterResponse = await fetch(
+      "https://api.sampleapis.com/futurama/characters/1",
+      {
+        next: {
+          revalidate: 60, // Revalidate every 60 seconds
+          tags: ["futurama", "character-1"],
+        },
+      }
+    );
+
+    const character = await characterResponse.json();
+    const name = character.name?.first || "Unknown";
+
+    return (
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold mb-4">Fetch Cache Example</h1>
+          <p className="text-gray-600">
+            This page demonstrates fetch caching with tags and time-based revalidation.
+          </p>
+        </div>
+
+        <div className="bg-white border border-gray-200 rounded-lg p-6">
+          <h2 className="text-xl font-semibold mb-4">Cached Data</h2>
+          <div className="space-y-2">
+            <p><strong>Character Name:</strong> {name}</p>
+            <p><strong>Page Rendered At:</strong> <code className="bg-gray-100 px-2 py-1 rounded">{timestamp}</code></p>
+          </div>
+        </div>
+
+        <div className="bg-blue-50 border-l-4 border-blue-500 p-4">
+          <h3 className="font-semibold mb-2">Caching Configuration</h3>
+          <ul className="list-disc list-inside space-y-1 text-sm">
+            <li><strong>Revalidate:</strong> 60 seconds</li>
+            <li><strong>Tags:</strong> futurama, character-1</li>
+            <li>The fetch is cached by the custom cache handler</li>
+            <li>Cached in Redis (primary) or LRU (fallback)</li>
+          </ul>
+        </div>
+
+        <div className="bg-yellow-50 border-l-4 border-yellow-500 p-4">
+          <h3 className="font-semibold mb-2">Test Revalidation</h3>
+          <p className="text-sm mb-3">
+            Trigger on-demand revalidation by tag:
+          </p>
+          <a
+            href="/api/revalidate-tag?tag=futurama"
+            className="inline-block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+          >
+            Revalidate &quot;futurama&quot; Tag
+          </a>
+        </div>
+
+        <div>
+          <h3 className="font-semibold mb-2">How It Works</h3>
+          <ol className="list-decimal list-inside space-y-2 text-sm text-gray-700">
+            <li>First request fetches from API and caches the result</li>
+            <li>Subsequent requests return cached data (fast!)</li>
+            <li>After 60 seconds, cache becomes stale</li>
+            <li>Next request triggers background revalidation</li>
+            <li>Or manually revalidate using tags via the API button above</li>
+          </ol>
+        </div>
+      </div>
+    );
+  } catch (error) {
+    console.error("Error fetching character data:", error);
+    return (
+      <div className="space-y-6">
+        <h1 className="text-3xl font-bold mb-4">Fetch Cache Example</h1>
+        <div className="bg-red-50 border-l-4 border-red-500 p-4">
+          <p className="font-semibold">Error fetching data</p>
+          <p className="text-sm mt-2">
+            Could not fetch character data. This might be due to network issues.
+          </p>
+        </div>
+      </div>
+    );
+  }
+}

examples/redis-minimal/src/app/fetch-example/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { Navigation } from "@/components/Navigation";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,8 +14,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Next.js 16 Cache Handler Examples",
+  description: "Examples demonstrating @fortedigital/nextjs-cache-handler with Next.js 16",
 };
 
 export default function RootLayout({
@@ -27,7 +28,10 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <Navigation />
+        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          {children}
+        </main>
       </body>
     </html>
   );