@trieb.work/nextjs-turbo-redis-cache 1.16.2 → 1.18.0

package/test/nextjs-test-projects/next-app-16-2-6-cache-components/next.config.ts

@@ -4,7 +4,9 @@ const nextConfig: NextConfig = {
   cacheComponents: true,
   cacheHandlers: {
     default: require.resolve('./cache-handler.js'),
+    remote: require.resolve('./cache-handler.js'),
   },
+  cacheMaxMemorySize: 0,
   turbopack: {
     root: __dirname,
   },

package/test/nextjs-test-projects/next-app-16-2-6-cache-components/pnpm-lock.yaml

@@ -561,7 +561,7 @@ packages:
   '@trieb.work/nextjs-turbo-redis-cache@file:../../..':
     resolution: {directory: ../../.., type: directory}
     peerDependencies:
-      next: '>=15.0.3 <16.3.0'
+      next: '>=15.0.3 <17.0.0'
       redis: 4.7.0
 
   '@tybys/wasm-util@0.10.1':

package/test/nextjs-test-projects/next-app-16-2-6-cache-components/src/app/api/expire-matrix/revalidate/route.ts

@@ -0,0 +1,34 @@
+import { NextResponse } from 'next/server';
+import { revalidateTag } from 'next/cache';
+
+type Profile =
+  | 'max'
+  | 'default'
+  | 'seconds'
+  | 'minutes'
+  | 'hours'
+  | 'days'
+  | 'weeks'
+  | { expire: number };
+
+export async function POST(request: Request) {
+  const body = (await request.json()) as {
+    tag?: string;
+    profile?: Profile | null;
+  };
+  const tag = body.tag || 'expire-matrix-default';
+
+  if (body.profile === undefined || body.profile === null) {
+    // Deprecated single-arg form: Next.js calls updateTags(tags) with no durations.
+    (revalidateTag as (tag: string) => void)(tag);
+  } else {
+    revalidateTag(tag, body.profile);
+  }
+
+  return NextResponse.json({
+    revalidated: true,
+    tag,
+    profile: body.profile ?? null,
+    timestamp: Date.now(),
+  });
+}

package/test/nextjs-test-projects/next-app-16-2-6-cache-components/src/app/api/expire-matrix/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server';
+import { cacheLife, cacheTag } from 'next/cache';
+
+let counter = 0;
+
+export async function GET(request: Request) {
+  const id = new URL(request.url).searchParams.get('id') || 'default';
+  const data = await getExpireMatrixData(id);
+  return NextResponse.json({ ...data, id });
+}
+
+async function getExpireMatrixData(id: string) {
+  'use cache';
+  // Long time-based lifetime so only tag invalidation can change the value.
+  cacheLife({ stale: 300, revalidate: 3600, expire: 86_400 });
+  cacheTag(`expire-matrix-${id}`);
+
+  counter += 1;
+  return {
+    counter,
+    timestamp: Date.now(),
+  };
+}

package/test/nextjs-test-projects/next-app-16-2-6-cache-components/src/app/cache-lab/page.tsx

@@ -70,6 +70,28 @@ export default function CacheLabIndexPage() {
             it into a cached component to show correct boundaries.
           </p>
         </Link>
+
+        <Link
+          className="rounded-lg border p-5 hover:bg-slate-50"
+          href="/cache-lab/use-cache-remote"
+        >
+          <h2 className="text-lg font-medium">use cache: remote</h2>
+          <p className="mt-1 text-sm text-slate-600">
+            Exercises <code>cacheHandlers.remote</code> with Redis-backed
+            streams and <code>updateTag</code>.
+          </p>
+        </Link>
+
+        <Link
+          className="rounded-lg border p-5 hover:bg-slate-50"
+          href="/cache-lab/revalidate-durations"
+        >
+          <h2 className="text-lg font-medium">revalidateTag durations</h2>
+          <p className="mt-1 text-sm text-slate-600">
+            Deferred tag invalidation via{' '}
+            <code>revalidateTag(tag, {'{ expire }'})</code> and SWR behavior.
+          </p>
+        </Link>
       </section>
 
       <section className="mt-12 rounded-lg border bg-slate-50 p-5">

package/test/nextjs-test-projects/next-app-16-2-6-cache-components/src/app/cache-lab/revalidate-durations/page.tsx

@@ -0,0 +1,106 @@
+import Link from 'next/link';
+import { Suspense } from 'react';
+import { cacheLife, cacheTag, revalidateTag } from 'next/cache';
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function getSlowTaggedValue() {
+  'use cache';
+
+  cacheLife({ stale: 60, revalidate: 120, expire: 300 });
+  cacheTag('cache-lab:durations');
+
+  await sleep(2500);
+
+  return {
+    computedAt: Date.now(),
+    value: Math.random(),
+  };
+}
+
+async function triggerDeferredRevalidateTag() {
+  'use server';
+  revalidateTag('cache-lab:durations', { expire: 2 });
+}
+
+async function CachedPanel() {
+  const data = await getSlowTaggedValue();
+
+  return (
+    <div className="rounded-lg border p-5">
+      <div className="text-sm text-slate-700">
+        <div>
+          <span className="font-medium">computedAt:</span>{' '}
+          <span data-testid="computedAt" className="font-mono">
+            {data.computedAt}
+          </span>
+        </div>
+        <div className="mt-1">
+          <span className="font-medium">value:</span>{' '}
+          <span data-testid="value" className="font-mono">
+            {data.value}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function RevalidateDurationsPage() {
+  return (
+    <main className="mx-auto max-w-3xl p-10">
+      <div className="mb-6">
+        <Link
+          className="text-sm text-blue-600 hover:underline"
+          href="/cache-lab"
+        >
+          ← Back to Cache Lab
+        </Link>
+      </div>
+
+      <header className="mb-6">
+        <h1 className="text-2xl font-semibold">
+          revalidateTag durations (SWR stale window)
+        </h1>
+        <p className="mt-2 text-sm text-slate-600">
+          Calls <code>revalidateTag(tag, {'{ expire: 2 }'})</code>. The handler
+          should mark the tag stale immediately while keeping the Redis entry so
+          the next request can serve stale content (SWR) during refresh.
+        </p>
+      </header>
+
+      <Suspense
+        fallback={
+          <div className="rounded-lg border bg-slate-50 p-5 text-sm text-slate-700">
+            Loading cached content… (first load can take ~2.5s)
+          </div>
+        }
+      >
+        <CachedPanel />
+      </Suspense>
+
+      <form action={triggerDeferredRevalidateTag} className="mt-6">
+        <button
+          className="rounded-md border border-blue-600 bg-white px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-50"
+          type="submit"
+        >
+          revalidateTag(&apos;cache-lab:durations&apos;, {'{ expire: 2 }'})
+        </button>
+      </form>
+
+      <div className="mt-6 rounded-lg border bg-slate-50 p-5 text-sm text-slate-700">
+        <p className="font-medium">How to observe SWR invalidation</p>
+        <ol className="mt-2 list-decimal space-y-1 pl-5">
+          <li>Load once (expect ~2.5s).</li>
+          <li>Click the button, then reload immediately.</li>
+          <li>
+            The reload should still show the old values (fast SWR). After
+            background refresh (~2.5s), values should change.
+          </li>
+        </ol>
+      </div>
+    </main>
+  );
+}

package/test/nextjs-test-projects/next-app-16-2-6-cache-components/src/app/cache-lab/use-cache-remote/page.tsx

@@ -0,0 +1,85 @@
+import Link from 'next/link';
+import { Suspense } from 'react';
+import { cacheTag, updateTag } from 'next/cache';
+
+async function getRemoteCachedValue() {
+  'use cache: remote';
+
+  cacheTag('cache-lab:remote');
+
+  return {
+    value: Math.random(),
+    computedAt: Date.now(),
+  };
+}
+
+async function triggerUpdateTag() {
+  'use server';
+  updateTag('cache-lab:remote');
+}
+
+async function RemotePanel() {
+  const data = await getRemoteCachedValue();
+
+  return (
+    <div className="rounded-lg border p-5">
+      <div className="text-sm text-slate-700">
+        <div>
+          <span className="font-medium">computedAt:</span>{' '}
+          <span data-testid="computedAt" className="font-mono">
+            {data.computedAt}
+          </span>
+        </div>
+        <div className="mt-1">
+          <span className="font-medium">value:</span>{' '}
+          <span data-testid="value" className="font-mono">
+            {data.value}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function UseCacheRemotePage() {
+  return (
+    <main className="mx-auto max-w-3xl p-10">
+      <div className="mb-6">
+        <Link
+          className="text-sm text-blue-600 hover:underline"
+          href="/cache-lab"
+        >
+          ← Back to Cache Lab
+        </Link>
+      </div>
+
+      <header className="mb-6">
+        <h1 className="text-2xl font-semibold">use cache: remote</h1>
+        <p className="mt-2 text-sm text-slate-600">
+          Exercises the <code>cacheHandlers.remote</code> handler backed by
+          Redis. Values should stay stable across reloads until{' '}
+          <code>updateTag</code> runs.
+        </p>
+      </header>
+
+      <Suspense
+        fallback={
+          <div className="rounded-lg border bg-slate-50 p-5 text-sm text-slate-700">
+            Loading remote cached content…
+          </div>
+        }
+      >
+        <RemotePanel />
+      </Suspense>
+
+      <form action={triggerUpdateTag} className="mt-6">
+        <button
+          className="rounded-md border border-blue-600 bg-white px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-50"
+          type="submit"
+        >
+          updateTag(&apos;cache-lab:remote&apos;)
+        </button>
+      </form>
+    </main>
+  );
+}

package/test/nextjs-test-projects/next-app-16-3-0/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/test/nextjs-test-projects/next-app-16-3-0/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/test/nextjs-test-projects/next-app-16-3-0/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  cacheHandler: require.resolve('@trieb.work/nextjs-turbo-redis-cache'),
+};
+
+export default nextConfig;

package/test/nextjs-test-projects/next-app-16-3-0/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "next-app-16-3-0",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.3.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "redis": "4.7.0",
+    "@trieb.work/nextjs-turbo-redis-cache": "file:../../../"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.3.0",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}