NextJS route vs pathname matcher

urls.test.ts

describe('matchesPath', () => {
  const matches = [
    ['/cake', '/cake'],
    ['/cake', '/cake/'],
    ['/cake', '/cake?frige=warm'],
    ['/cake', '/cake?frige=warm&freezer=cold'],
    ['/[id]', '/cake'],
    ['/[anything-goes]', '/cake'],
    ['/c/[id]/practitioner/[pid]/[anything-goes]', '/c/1/practitioner/2/3'],
    ['/[...rest]', '/cake'],
    ['/[...rest]', '/cake/fake/snake?shake=true'],
    ['/shop/[[...rest]]', '/shop'],
    ['/shop/[[...rest]]', '/shop/'],
    ['/shop/[[...rest]]', '/shop/snake'],
    ['/[...rest]/fake/snake', '/cake/fake/snake?shake=true'],
    [
      '/welcome',
      '/welcome/?verifier=z3vvsSm',
    ],
  ] as Array<[string, string]>;

  const nonMatches = [
    ['/stake', '/snake'],
    ['/cake', '/cake/subpath-not-ok'],
    ['/cake/[oh-whats-this]', '/cake/'],
    ['/[...rest]/nope/snake', '/cake/fake/snake?shake=true'],
    ['/[...rest]', '/'],
  ] as Array<[string, string]>;

  matches.forEach(([path, asPath]) => {
    it(`matches ${asPath} to ${path}`, () => {
      expect(matchesPathname(asPath, path)).toEqual(true);
    });
  });

  nonMatches.forEach(([path, asPath]) => {
    it(`does not match ${asPath} to ${path}`, () => {
      expect(matchesPathname(asPath, path)).toEqual(false);
    });
  });
});

urls.ts

export const removeTrailingSlash = (val: string) =>
  val.endsWith('/') ? val.substring(0, val.length - 1) : val;

export const matchesPathname = (asPath: string, pathname: string) => {
  if (asPath === pathname) {
    return true;
  }
  const baseAsPath = removeTrailingSlash(asPath.split('?')[0] as string);
  const basePathname = removeTrailingSlash(pathname.split('?')[0] as string);
  if (baseAsPath === basePathname) {
    return true;
  }
  const basePathRegex = new RegExp(
    `^${basePathname.replace(/(\[[a-zA-Z0-9-]+\])+/g, '[a-zA-Z0-9-]+')}$`
      .replace(/\[\[\.\.\.[a-zA-Z0-9-]+\]\]/g, '?.*')
      .replace(/\[\.\.\.[a-zA-Z0-9-]+\]/g, '.*'),
  );
  if (basePathRegex.test(baseAsPath)) {
    return true;
  }
  return false;
};

Hi @tomfa thank you for this function.
Just a small tip, in order to handle also the Optional Catch-all Segments

we need to change the regex into

const basePathRegex = new RegExp(
    `^${basePathname.replace(
      /(\[[a-zA-Z0-9-]+\])+/g,
      '[a-zA-Z0-9-]+'
    )}$`.replace(/\[+\.\.\.[a-zA-Z0-9-]+\]+/g, '?.*')

Because we need to

• check if we have [[ instead of [ for the initial checking
• make the last / optional because with the Optional Optional Catch-all Segments, as the doc said, the route without the parameter is also matched

I've updated the gist to take Optional Catch-all Segments + added the missing function. Thanks for the help! ❤️

This no longer seems to work?

The paths with dynamic segments (ie matchesPathname('/[id]', '/cake')) return false

The paths with dynamic segments (ie matchesPathname('/[id]', '/cake')) return false

You messed up the param order. matchesPathname('/cake', '/[id]') actually works.

Great Job!

I've simplyfied the if statement, since test always returns a boolean:

before:

  if (basePathRegex.test(baseAsPath)) {
    return true;
  }
  return false;

after:

   return basePathRegex.test(baseAsPath);

full implementation:

export const matchesPathname = (asPath: string, pathname: string) => {
  if (asPath === pathname) {
    return true;
  }
  const baseAsPath = removeTrailingSlash(asPath.split("?")[0] as string);
  const basePathname = removeTrailingSlash(pathname.split("?")[0] as string);
  if (baseAsPath === basePathname) {
    return true;
  }
  const basePathRegex = new RegExp(
    `^${basePathname.replace(/(\[[a-zA-Z0-9-]+\])+/g, "[a-zA-Z0-9-]+")}$`.replace(/\[\[\.\.\.[a-zA-Z0-9-]+\]\]/g, "?.*").replace(/\[\.\.\.[a-zA-Z0-9-]+\]/g, ".*"),
  );
  return basePathRegex.test(baseAsPath);
};

Test results