revalidatePath() with custom pathnames

[markoleavy]

When using pathnames to translate folders/slugs, revalidating a translated path does not work.
Example:

• File structure is: [locale]/product/page.tsx.
• Pathname for product is prodotto for locale == 'it'.
• To revalidate /it/prodotto/1234 I need to call revalidatePath('/it/product/1234').

I'm writing an horrible workaround with switch and replace().
Does anyone has a smarter idea to fix this problem?

[amannn]

Have you seen How can I revalidate localized pathnames? in the docs?

[markoleavy]

Hi Jan,
thanks for your reply. Sorry no, I didn't read that part of the doc, but it looks like my page revalidation works only if the original folder name ("product") is passed, no matter if the page was included or not in generateStaticParams().

A part from that here's some consideration I've made while debugging revalidation. Most of them probably concern Next and Vercel, but they might be useful things to be aware of:

• Vercel cache is shared along all the preview deployments, so invalidating a page on one domain, invalidates it on every domain. For this reason, invalidating a path while a branch is building static pages might not work.
• When using the folder structure above, calling revalidatePath('/en/blog') invalidates the whole content of the path /blog/, including page /blog. revalidatePath('/en/blog/categories') or revalidatePath('/en/product') work both as expected. The problem seems to be the nested catch all, combined with the other cases.
• Using dynamicParams = false inside [...blog] works in local builds but produce strange cache behavior (empty layout is rendered after revalidation). Doesn't work at all on Vercel.

app
└── [locale]
    └── blog
        └── [...blog]
            └── page.tsx // leads to '/blog/categories'
        └── a
            └── [post]
                └── page.tsx // leads to '/blog/a/my-post'
        └── page.tsx // leads to '/blog'
    └── product
        └── [product]
            └── page.tsx //leads to '/product/3244121'
        └── page.tsx // leads to '/product'
         

[email protected]
[email protected]