Next.js Discord

Discord Forum

Middleware rewrite shows cached page after revalidatePath

Unanswered
African Slender-snouted Crocodil… posted this in #help-forum
Open in Discord
African Slender-snouted CrocodileOP
I have a middleware that rewrites the request url to a new one. Like /post/<slug> to /p/<domain>/<slug>.

The /p/[domain]/[slug] page is statically generated and has revalidation set to false.

I have an api route that handles revalidating the pages revalidatePath('/p/${domain}/${slug}').

However when visiting the page after revalidating the old data is still shown and the page is not rebuilt.

Is there an incompatibility with nextjs page caches and rewrites?

3 Replies

African Slender-snouted CrocodileOP
Middleware:
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const url = request.nextUrl;
  const domain = request.headers.get('host') || '';
  const slug = url.pathname.split('/')[1];

  const newPath = `/p/${domain}/${slug}`;
  const newUrl = new URL(newPath, url.origin);
  url.searchParams.forEach((value, key) => {
    newUrl.searchParams.append(key, value);
  });

  console.log('MIDDLEWARE - rewrite');
  console.log('  slug:', slug);
  console.log('  domain:', domain);
  console.log('  path:', newPath);
  console.log('  url:', newUrl.href);

  return NextResponse.rewrite(newUrl);
}

export const config = {
  matcher: ['/post/:slug*']
};
Route:
import { NextRequest, NextResponse } from 'next/server';
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(request: NextRequest) {
  let { slugs, domains } = await request.json();

  console.log('API - revalidate - start');
  console.log('  slugs:', slugs);
  console.log('  domains:', domains);

  try {
    domains = domains ? (Array.isArray(domains) ? domains : [domains]) : [];
    slugs = slugs ? (Array.isArray(slugs) ? slugs : [slugs]) : [];

    for (const domain of domains) {
      for (const slug of slugs) {
        const path = `/p/${domain}/${slug}`;
        revalidatePath(path);
        console.log('API - revalidate');
        console.log('  slug:', slug);
        console.log('  domain:', domain);
        console.log('  path:', path);
      }
    }

    return NextResponse.json({
      revalidated: true,
      now: Date.now()
    });
  } catch (err) {
    console.error(err);
    return NextResponse.json(
      { message: 'Error revalidating' },
      { status: 500 }
    );
  }
}
African Slender-snouted CrocodileOP
With NEXT_PRIVATE_DEBUG_CACHE=1

I see logs for setting and getting the page from cache

visit page http://localhost:3000/post/Il2XCQ

get /p/localhost/Il2XCQ undefined app false

page builds...
set /p/localhost/Il2XCQ
revalidatePath
Updated tags manifest {
  version: 1,
  items: {
    '_N_T_/p/localhost/Il2XCQ': { revalidatedAt: 1731078501339 }
  }
}

revisit page
get /p/localhost/Il2XCQ undefined app true