FG
💻 Software🌐 Web & Full-StackVercel

[NEXT-1186] revalidatePath not working for dynamic routes while res.revalidate works fine

Fresh3 days ago
Mar 14, 20260 views
Confidence Score84%
84%

Problem

Verify canary release [X] I verified that the issue exists in the latest Next.js canary release Provide environment information [code block] Which area(s) of Next.js are affected? (leave empty if unsure) App directory (appDir: true) Link to the code that reproduces this issue https://github.com/roxizhauk/revalidate-path CodeSandBox To Reproduce Visit `/blog/[anything]` (e.g. `/blog/test` ) to generate a dynamic page and check the time shown To try "unsuccessful" app directory's `revalidatePath`: 1. hit `/api/revalidate-path?path=/blog/[anything]` and you'll see "revalidated" 2. refresh `/blog/[anything]` and you'll see the time not changed To try "successful" pages directory's `res.revalidate`: 1. hit `/api/revalidate?path=/blog/[anything]` and you'll see "revalidated" 2. refresh `/blog/[anything]` and you'll see the time changed Describe the Bug The app directory's `revalidatePath` works fine for "/" or "/blog" but dynamic routes like "/blog/1" or "/blog/test" while pages directory's `res.revalidate` works fine for all Expected Behavior `revalidatePath` works the same as `res.revalidate` for dynamic routes Which browser are you using? (if relevant) No response How are you deploying your application? (if relevant) No response* <sub>From SyncLinear.com | NEXT-1186</sub>

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Fix revalidatePath for Dynamic Routes in Next.js App Directory

Medium Risk

The issue arises because the `revalidatePath` function in the Next.js app directory does not correctly handle dynamic routes. Unlike the pages directory, where `res.revalidate` works seamlessly for dynamic paths, the app directory's implementation lacks the necessary logic to parse and revalidate dynamic routes, leading to inconsistent behavior.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Update revalidatePath Logic

    Modify the `revalidatePath` function to properly handle dynamic routes by parsing the incoming path and ensuring it matches the expected dynamic route format.

    javascript
    const revalidatePath = async (path) => {
  const dynamicRoutePattern = /\/blog\/[^/]+/;
  if (dynamicRoutePattern.test(path)) {
    // Logic to handle dynamic route revalidation
  } else {
    // Existing logic for static routes
  }
};
  2. 2

    Add Route Matching Logic

    Implement logic to match the dynamic route against the existing routes in the application. This will ensure that when a dynamic path is revalidated, it correctly identifies the associated page.

    javascript
    const matchDynamicRoute = (path) => {
  const routes = ['/blog/[slug]']; // Add all dynamic routes here
  return routes.some(route => matchPath(route, path));
};
  3. 3

    Test Revalidation for Dynamic Routes

    Create unit tests to verify that the `revalidatePath` function works correctly for various dynamic routes. Ensure that the tests cover both successful and unsuccessful revalidation scenarios.

    javascript
    test('revalidatePath for dynamic route', async () => {
  const response = await revalidatePath('/blog/test');
  expect(response).toBe('revalidated');
});
  4. 4

    Deploy Changes and Monitor

    Deploy the updated code to your staging environment and monitor the behavior of dynamic routes. Ensure that the revalidation works as expected and that no other functionality is affected.

    bash
    npm run deploy

Validation

To confirm the fix worked, visit a dynamic route like `/blog/test` after deploying the changes. Call the `revalidatePath` API and then refresh the page. The displayed time should update correctly, indicating successful revalidation.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

nextjsreactssrbuglinear:-nextlocked