@trieb.work/nextjs-turbo-redis-cache 1.8.1 → 1.9.0

package/test/integration/next-app-15-4-7/src/app/pages/cached-static-fetch/default--force-dynamic-page/page.tsx

@@ -0,0 +1,19 @@
+export const dynamic = 'force-dynamic';
+
+export default async function TestPage() {
+  const res = await fetch(
+    `http://localhost:${process.env.NEXT_START_PORT || 3000}/api/cached-static-fetch`,
+  );
+  const data = await res.json();
+  return (
+    <main
+      style={{ padding: 32, fontFamily: 'sans-serif', textAlign: 'center' }}
+    >
+      <h1>Test Page</h1>
+      <p>Counter: {data.counter}</p>
+      <p>This is a test page for integration testing.</p>
+      <p>Timestamp: {Date.now()}</p>
+      <p>Slug: /test-page</p>
+    </main>
+  );
+}

package/test/integration/next-app-15-4-7/src/app/pages/cached-static-fetch/revalidate15--default-page/page.tsx

@@ -0,0 +1,34 @@
+export default async function TestPage() {
+  let res;
+  try {
+    res = await fetch(
+      `http://localhost:${process.env.NEXT_START_PORT || 3000}/api/cached-static-fetch`,
+      {
+        next: {
+          revalidate: 15,
+          tags: ['cached-static-fetch-revalidate15-default-page'],
+        },
+      },
+    );
+  } catch (e) {
+    // ECONNREFUSED is expected during build
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (((e as Error).cause as any)?.code !== 'ECONNREFUSED') {
+      throw e;
+    }
+  }
+
+  const data = res?.ok ? await res.json() : { counter: -1 };
+
+  return (
+    <main
+      style={{ padding: 32, fontFamily: 'sans-serif', textAlign: 'center' }}
+    >
+      <h1>Test Page</h1>
+      <p>Counter: {data.counter}</p>
+      <p>This is a test page for integration testing.</p>
+      <p>Timestamp: {Date.now()}</p>
+      <p>Slug: /test-page</p>
+    </main>
+  );
+}

package/test/integration/next-app-15-4-7/src/app/pages/cached-static-fetch/revalidate15--force-dynamic-page/page.tsx

@@ -0,0 +1,25 @@
+export const dynamic = 'force-dynamic';
+
+export default async function TestPage() {
+  const res = await fetch(
+    `http://localhost:${process.env.NEXT_START_PORT || 3000}/api/cached-static-fetch`,
+    {
+      next: {
+        revalidate: 15,
+        tags: ['cached-static-fetch-revalidate15-force-dynamic-page'],
+      },
+    },
+  );
+  const data = await res.json();
+  return (
+    <main
+      style={{ padding: 32, fontFamily: 'sans-serif', textAlign: 'center' }}
+    >
+      <h1>Test Page</h1>
+      <p>Counter: {data.counter}</p>
+      <p>This is a test page for integration testing.</p>
+      <p>Timestamp: {Date.now()}</p>
+      <p>Slug: /test-page</p>
+    </main>
+  );
+}

package/test/integration/next-app-15-4-7/src/app/pages/no-fetch/default-page/page.tsx

@@ -0,0 +1,55 @@
+export default async function TestPage() {
+  await new Promise((r) => setTimeout(r, 1000));
+  const rdm = Math.random();
+  return (
+    <main
+      style={{ padding: 32, fontFamily: 'sans-serif', textAlign: 'center' }}
+    >
+      <h1>Test Page</h1>
+      <p>Random number: {rdm}</p>
+      <p>This is a test page for integration testing.</p>
+      <p>Timestamp: {Date.now()}</p>
+    </main>
+  );
+}
+
+/**
+ * TODO
+ * Test cases:
+ * 0. Store timestamp of the first call in a variable so we can later check if TTL in redis is correct
+ * 1. Call the page twice
+ * 2. Extract the Timestamp from both results
+ * 3. Compare the two timestamps
+ * 4. The timestamps should be the same, meaning that the page was deduplicated
+ *
+ * 5. Connect to redis and check if the page was cached in redis and if TTL is set correctly
+ *
+ * 6. Call the page again, but wait 3 seconds before calling it
+ * 7. Extract the Timestamp
+ * 8. Compare the timestamp to previous timestamp
+ * 9. The timestamp should be the same, meaning that the page was cached (By in-memory cache which is set to 10 seconds by default)
+ *
+ * 10. Call the page again, but wait 11 seconds before calling it
+ * 11. Extract the Timestamp
+ * 12. Compare the timestamp to previous timestamp
+ * 13. The timestamp should be the same, meaning that the page was cached (By redis cache which becomes active after in-memory cache expires)
+ *
+ * 14. Connect to redis and check if the page was cached in redis and if TTL is set correctly
+ *
+ * 15. Check expiration time of the page in redis
+ *
+ * 16. Call the page again after TTL expiration time
+ * 17. Extract the Timestamp
+ * 18. Compare the timestamp to previous timestamp
+ * 19. The timestamp should be different, meaning that the page was recreated
+ *
+ * 20. call API which will invalidate the page via a revalidatePage action
+ * 21. Call the page again
+ * 18. Compare the timestamp to previous timestamp
+ * 19. The timestamp should be different, meaning that the page was recreated
+ *
+ * 20. Connect to redis and delete the page from redis
+ * 21. Call the page again, but wait 11 seconds before calling it
+ * 22. Compare the timestamp to previous timestamp
+ * 23. The timestamp should be different, meaning that the page was recreated
+ */

package/test/integration/next-app-15-4-7/src/app/pages/revalidated-fetch/default--force-dynamic-page/page.tsx

@@ -0,0 +1,19 @@
+export const dynamic = 'force-dynamic';
+
+export default async function TestPage() {
+  const res = await fetch(
+    `http://localhost:${process.env.NEXT_START_PORT || 3000}/api/revalidated-fetch`,
+  );
+  const data = await res.json();
+  return (
+    <main
+      style={{ padding: 32, fontFamily: 'sans-serif', textAlign: 'center' }}
+    >
+      <h1>Test Page</h1>
+      <p>Counter: {data.counter}</p>
+      <p>This is a test page for integration testing.</p>
+      <p>Timestamp: {Date.now()}</p>
+      <p>Slug: /test-page</p>
+    </main>
+  );
+}

package/test/integration/next-app-15-4-7/src/app/pages/revalidated-fetch/revalidate15--default-page/page.tsx

@@ -0,0 +1,35 @@
+// This page will inherit the revalidate from it's subsequent fetch request
+// meaning that the page will be revalidated after 15 seconds
+
+export default async function TestPage() {
+  try {
+    const res = await fetch(
+      `http://localhost:${process.env.NEXT_START_PORT || 3000}/api/revalidated-fetch`,
+      {
+        next: {
+          revalidate: 15,
+          tags: ['revalidated-fetch-revalidate15-default-page'],
+        },
+      },
+    );
+    const data = await res.json();
+    return (
+      <main
+        style={{ padding: 32, fontFamily: 'sans-serif', textAlign: 'center' }}
+      >
+        <h1>Test Page</h1>
+        <p>Counter: {data.counter}</p>
+        <p>This is a test page for integration testing.</p>
+        <p>Timestamp: {Date.now()}</p>
+        <p>Slug: /test-page</p>
+      </main>
+    );
+  } catch (e) {
+    return (
+      <p>
+        Error: {JSON.stringify(e)} (an error here is normal during build since
+        API is not available yet)
+      </p>
+    );
+  }
+}

package/test/integration/next-app-15-4-7/src/app/pages/revalidated-fetch/revalidate15--force-dynamic-page/page.tsx

@@ -0,0 +1,25 @@
+export const dynamic = 'force-dynamic';
+
+export default async function TestPage() {
+  const res = await await fetch(
+    `http://localhost:${process.env.NEXT_START_PORT || 3000}/api/revalidated-fetch`,
+    {
+      next: {
+        revalidate: 15,
+        tags: ['revalidated-fetch-revalidate15-force-dynamic-page'],
+      },
+    },
+  );
+  const data = await res.json();
+  return (
+    <main
+      style={{ padding: 32, fontFamily: 'sans-serif', textAlign: 'center' }}
+    >
+      <h1>Test Page</h1>
+      <p>Counter: {data.counter}</p>
+      <p>This is a test page for integration testing.</p>
+      <p>Timestamp: {Date.now()}</p>
+      <p>Slug: /test-page</p>
+    </main>
+  );
+}

package/test/integration/next-app-15-4-7/src/app/pages/uncached-fetch/default--force-dynamic-page/page.tsx

@@ -0,0 +1,19 @@
+export const dynamic = 'force-dynamic';
+
+export default async function TestPage() {
+  const res = await fetch(
+    `http://localhost:${process.env.NEXT_START_PORT || 3000}/api/uncached-fetch`,
+  );
+  const data = await res.json();
+  return (
+    <main
+      style={{ padding: 32, fontFamily: 'sans-serif', textAlign: 'center' }}
+    >
+      <h1>Test Page</h1>
+      <p>Counter: {data.counter}</p>
+      <p>This is a test page for integration testing.</p>
+      <p>Timestamp: {Date.now()}</p>
+      <p>Slug: /test-page</p>
+    </main>
+  );
+}

package/test/integration/next-app-15-4-7/src/app/pages/uncached-fetch/revalidate15--default-page/page.tsx

@@ -0,0 +1,32 @@
+export default async function TestPage() {
+  try {
+    const res = await fetch(
+      `http://localhost:${process.env.NEXT_START_PORT || 3000}/api/uncached-fetch`,
+      {
+        next: {
+          revalidate: 15,
+          tags: ['uncached-fetch-revalidate15-default-page'],
+        },
+      },
+    );
+    const data = await res.json();
+    return (
+      <main
+        style={{ padding: 32, fontFamily: 'sans-serif', textAlign: 'center' }}
+      >
+        <h1>Test Page</h1>
+        <p>Counter: {data.counter}</p>
+        <p>This is a test page for integration testing.</p>
+        <p>Timestamp: {Date.now()}</p>
+        <p>Slug: /test-page</p>
+      </main>
+    );
+  } catch (e) {
+    return (
+      <p>
+        Error: {JSON.stringify(e)} (an error here is normal during build since
+        API is not available yet)
+      </p>
+    );
+  }
+}

package/test/integration/next-app-15-4-7/src/app/pages/uncached-fetch/revalidate15--force-dynamic-page/page.tsx

@@ -0,0 +1,25 @@
+export const dynamic = 'force-dynamic';
+
+export default async function TestPage() {
+  const res = await fetch(
+    `http://localhost:${process.env.NEXT_START_PORT || 3000}/api/uncached-fetch`,
+    {
+      next: {
+        revalidate: 15,
+        tags: ['uncached-fetch-revalidate15-force-dynamic-page'],
+      },
+    },
+  );
+  const data = await res.json();
+  return (
+    <main
+      style={{ padding: 32, fontFamily: 'sans-serif', textAlign: 'center' }}
+    >
+      <h1>Test Page</h1>
+      <p>Counter: {data.counter}</p>
+      <p>This is a test page for integration testing.</p>
+      <p>Timestamp: {Date.now()}</p>
+      <p>Slug: /test-page</p>
+    </main>
+  );
+}

package/test/integration/next-app-15-4-7/src/app/revalidation-interface.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import { useState } from 'react';
+
+// Define API routes for path-based revalidation
+const apiRoutePaths: Record<string, string> = {
+  'Cached Static Fetch': '/api/cached-static-fetch',
+  'Uncached Fetch': '/api/uncached-fetch',
+  'Revalidated Fetch': '/api/revalidated-fetch',
+  'Nested Fetch in API Route':
+    '/api/nested-fetch-in-api-route/revalidated-fetch',
+};
+
+// Define API routes with tags for tag-based revalidation
+const apiRouteTags: Record<string, string> = {
+  'Revalidated Fetch in Nested API Route':
+    'revalidated-fetch-revalidate3-nested-fetch-in-api-route',
+  'Revalidated Fetch API': 'revalidated-fetch-api',
+  'Cached Static Fetch API': 'cached-static-fetch-api',
+  'Uncached Fetch API': 'uncached-fetch-api',
+};
+
+// Revalidation Interface Component
+export function RevalidationInterface() {
+  const [selectedPathRoute, setSelectedPathRoute] = useState('');
+  const [selectedTagRoute, setSelectedTagRoute] = useState('');
+  const [revalidationStatus, setRevalidationStatus] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handlePathRevalidate = async () => {
+    if (!selectedPathRoute) {
+      setRevalidationStatus('Please select an API route to revalidate by path');
+      return;
+    }
+
+    setIsLoading(true);
+    setRevalidationStatus('Revalidating API route by path...');
+
+    try {
+      const path = apiRoutePaths[selectedPathRoute];
+      const response = await fetch(`/api/revalidatePath?path=${path}`);
+      const data = await response.json();
+
+      if (response.ok) {
+        setRevalidationStatus(
+          `Successfully revalidated API route by path: ${selectedPathRoute} (${path})`,
+        );
+      } else {
+        setRevalidationStatus(`Error: ${data.error || 'Unknown error'}`);
+      }
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+      setRevalidationStatus(`Error: ${errorMessage}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleTagRevalidate = async () => {
+    if (!selectedTagRoute) {
+      setRevalidationStatus('Please select an API route to revalidate by tag');
+      return;
+    }
+
+    setIsLoading(true);
+    setRevalidationStatus('Revalidating API route by tag...');
+
+    try {
+      const tag = apiRouteTags[selectedTagRoute];
+      const response = await fetch(`/api/revalidateTag?tag=${tag}`);
+      const data = await response.json();
+
+      if (response.ok) {
+        setRevalidationStatus(
+          `Successfully revalidated API route by tag: ${selectedTagRoute} (tag: ${tag})`,
+        );
+      } else {
+        setRevalidationStatus(`Error: ${data.error || 'Unknown error'}`);
+      }
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+      setRevalidationStatus(`Error: ${errorMessage}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        border: '1px solid #eaeaea',
+        padding: '25px',
+        borderRadius: '8px',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
+        backgroundColor: '#fff',
+        marginBottom: '30px',
+      }}
+    >
+      <h3
+        style={{
+          fontSize: '1.4rem',
+          color: '#0070f3',
+          marginTop: '0',
+          marginBottom: '15px',
+          borderBottom: '1px solid #eaeaea',
+          paddingBottom: '10px',
+        }}
+      >
+        API Route Revalidation Interface
+      </h3>
+
+      {/* Path-based revalidation section */}
+      <div
+        style={{
+          padding: '15px',
+          marginBottom: '20px',
+          backgroundColor: '#f9f9f9',
+          borderRadius: '5px',
+          border: '1px solid #eaeaea',
+        }}
+      >
+        <h4
+          style={{
+            fontSize: '1.1rem',
+            color: '#0070f3',
+            marginTop: '0',
+            marginBottom: '15px',
+          }}
+        >
+          Revalidate API Route by Path
+        </h4>
+
+        <div style={{ marginBottom: '15px' }}>
+          <label
+            style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}
+          >
+            Select API Route:
+          </label>
+          <select
+            value={selectedPathRoute}
+            onChange={(e) => setSelectedPathRoute(e.target.value)}
+            style={{
+              width: '100%',
+              padding: '10px',
+              borderRadius: '5px',
+              border: '1px solid #ddd',
+              fontSize: '1rem',
+            }}
+          >
+            <option value="">-- Select an API route --</option>
+            {Object.keys(apiRoutePaths).map((route) => (
+              <option key={route} value={route}>
+                {route}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <button
+          onClick={handlePathRevalidate}
+          disabled={isLoading || !selectedPathRoute}
+          style={{
+            backgroundColor: '#0070f3',
+            color: 'white',
+            border: 'none',
+            padding: '10px 20px',
+            borderRadius: '5px',
+            fontSize: '1rem',
+            fontWeight: '500',
+            cursor: isLoading || !selectedPathRoute ? 'not-allowed' : 'pointer',
+            opacity: isLoading || !selectedPathRoute ? 0.7 : 1,
+            transition: 'all 0.2s',
+          }}
+        >
+          {isLoading ? 'Revalidating...' : 'Revalidate by Path'}
+        </button>
+      </div>
+
+      {/* Tag-based revalidation section */}
+      <div
+        style={{
+          padding: '15px',
+          marginBottom: '20px',
+          backgroundColor: '#f9f9f9',
+          borderRadius: '5px',
+          border: '1px solid #eaeaea',
+        }}
+      >
+        <h4
+          style={{
+            fontSize: '1.1rem',
+            color: '#0070f3',
+            marginTop: '0',
+            marginBottom: '15px',
+          }}
+        >
+          Revalidate API Route by Tag
+        </h4>
+
+        <div style={{ marginBottom: '15px' }}>
+          <label
+            style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}
+          >
+            Select API Route with Tag:
+          </label>
+          <select
+            value={selectedTagRoute}
+            onChange={(e) => setSelectedTagRoute(e.target.value)}
+            style={{
+              width: '100%',
+              padding: '10px',
+              borderRadius: '5px',
+              border: '1px solid #ddd',
+              fontSize: '1rem',
+            }}
+          >
+            <option value="">-- Select an API route with tag --</option>
+            {Object.keys(apiRouteTags).map((route) => (
+              <option key={route} value={route}>
+                {route}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <button
+          onClick={handleTagRevalidate}
+          disabled={isLoading || !selectedTagRoute}
+          style={{
+            backgroundColor: '#0070f3',
+            color: 'white',
+            border: 'none',
+            padding: '10px 20px',
+            borderRadius: '5px',
+            fontSize: '1rem',
+            fontWeight: '500',
+            cursor: isLoading || !selectedTagRoute ? 'not-allowed' : 'pointer',
+            opacity: isLoading || !selectedTagRoute ? 0.7 : 1,
+            transition: 'all 0.2s',
+          }}
+        >
+          {isLoading ? 'Revalidating...' : 'Revalidate by Tag'}
+        </button>
+      </div>
+
+      {/* Status display */}
+      {revalidationStatus && (
+        <div
+          style={{
+            marginTop: '15px',
+            padding: '10px',
+            borderRadius: '5px',
+            backgroundColor: revalidationStatus.includes('Error')
+              ? '#ffebee'
+              : '#e3f2fd',
+            color: revalidationStatus.includes('Error') ? '#c62828' : '#0070f3',
+            border: `1px solid ${revalidationStatus.includes('Error') ? '#ffcdd2' : '#bbdefb'}`,
+          }}
+        >
+          {revalidationStatus}
+        </div>
+      )}
+    </div>
+  );
+}

package/test/integration/next-app-15-4-7/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/test/integration/nextjs-cache-handler.integration.test.ts

@@ -6,8 +6,10 @@ import { join } from 'path';
 import { CacheEntry } from '../../src/RedisStringsHandler';
 import { revalidate as next1503_revalidatedFetch_route } from './next-app-15-0-3/src/app/api/revalidated-fetch/route';
 
-// const NEXT_APP_DIR = join(__dirname, 'next-app-15-0-3');
-const NEXT_APP_DIR = join(__dirname, 'next-app-15-3-2');
+// Select which Next.js test app to use. Can be overridden via NEXT_TEST_APP env var
+// Examples: next-app-15-0-3, next-app-15-3-2, next-app-15-4-7
+const NEXT_TEST_APP = process.env.NEXT_TEST_APP || 'next-app-15-4-7';
+const NEXT_APP_DIR = join(__dirname, NEXT_TEST_APP);
 console.log('NEXT_APP_DIR', NEXT_APP_DIR);
 const NEXT_START_PORT = 3055;
 const NEXT_START_URL = `http://localhost:${NEXT_START_PORT}`;
@@ -574,8 +576,9 @@ describe('Next.js Turbo Redis Cache Integration', () => {
           expect(data).toBeDefined();
           const cacheEntry: CacheEntry = JSON.parse(data);
 
-          // The format should be as expected
-          expect(cacheEntry).toEqual({
+          // The format should be as expected. We intentionally do not assert on an optional status field here
+          // so that different Next.js versions (which may include or omit it) are both supported.
+          expect(cacheEntry).toMatchObject({
             value: {
               kind: 'APP_PAGE',
               html: expect.any(String),
@@ -587,7 +590,6 @@ describe('Next.js Turbo Redis Cache Integration', () => {
                 'x-next-cache-tags':
                   '_N_T_/layout,_N_T_/pages/layout,_N_T_/pages/no-fetch/layout,_N_T_/pages/no-fetch/default-page/layout,_N_T_/pages/no-fetch/default-page/page,_N_T_/pages/no-fetch/default-page',
               },
-              status: 200,
             },
             lastModified: expect.any(Number),
             tags: [