Error parsing segments in get-params

[stefan-garofalo]

urlPathname: /it/404;
pagePath: /_not-found/page;
versions:

 "dependencies": {
    "@nimpl/getters": "^1.4.0",
    "eslint": "^8.45.0",
    "eslint-config-next": "^14.2.3",
    "next": "^14.2.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
  },

I dont really know what caused this error. Calling useParams inside the not-found page with such /app structure is breaking tho.

Here instead is the code
not-found.jsx

import LocaleLink from "@/components/Locale/Link";

export default async function NotFound() {
  return (
    <div className="fixed inset-0 w-full flex flex-col items-center justify-center h-svh">
      <h1 className="typog-30-medium lg:typog-56-medium">404!</h1>
      <LocaleLink href="/">Homepage</LocaleLink>
    </div>
  );
}

LocaleLink.jsx

import i18n from "@/lib/i18n";
import Link from "next/link";
import { getParams } from "@nimpl/getters/get-params";

export default function LocaleLink({ children, href, ...props }) {
  const { lang } = getParams();

  return (
    <Link {...props} href={i18n.path(href, lang)}>
      {children}
    </Link>
  );
}

I also underline how the getter is correctly returning params, it still throws the error but the function result is correct

[vordgi]

Hello! Thank you for writing about the problem!

Generally from what I see - the error is correct. getParams gets dynamic parameters from the current path. The /not-found.tsx page has no such parameters.

Unfortunately, I can't figure out that for the error page the first part is locale (and for the /it/some-deleted-page it is, but for /banking/some-deleted-page it's not).

What I can do:

1. I can add an option to disable errors and in such situations the function will just return null (getParams({ ignoreDifference: true }));
2. I can add support for custom paths (getParams({ pagePaths: ['/[locale]/[[…subpaths]]'] }))

Will this help solve your problem or do you see the solution differently?

[stefan-garofalo]

Hello and thanks for the quick reply. I actually worked my way around it wrapping the getter into a trycatch, and ignore the error since it actually returned the correct value.

The first resolution you proposed would fit perfectly

[vordgi]

Done! You can try it in v1.4.1.

Also implemented the second resolution. Here, in tests, is an example of how you can use it - tests/base/app/not-found.tsx

const params = getParams({
  ignoreDifferenceError: true,
  pagePaths: ["/specific/[locale]/[...subpaths]/page", "/[locale]/base/[...subpaths]/page"],
});
// "/specific/de/unknown-page" -> { locale: "de", subpaths: ["unknown-page"] }
// "/it/base/unknown-page" -> { locale: "it", subpaths: ["unknown-page"] }
// "/it/invalid/unknown-page" -> null

Thanks again for sharing a problem!

[stefan-garofalo]

Thank you for the quick fix!