not-found.tsx is not translated

[brunoscopelliti]

What version of this package are you using?

next: 13.4.12
next-translate: 2.5.2
next-translate-plugin: 2.5.2

Node.js v20.5.0

What happened?

In the not-found.tsx page we see the label key, instead of the actual label content.
Attaching a repro:

repro.zip

What did you expect to happen?

See the translated label.

[aralroca]

@brunoscopelliti I replaced this file:

import getT from "next-translate/getT";

const Page404 = async ({ searchParams }: any) => {
  const t = await getT(searchParams?.lang as string, ["common"]);
  return (
    <div>Test: {t("label_1")}</div>
  );
};

export default Page404;

to:

import createTranslation from "next-translate/useTranslation";

const Page404 = async () => {
  const { t } = createTranslation("common");

  return (
    <div>Test: {t("label_1")}</div>
  );
};

export default Page404;

And now the translation works fine.

The problem is that searchParams is undefined in not-found.tsx file, so this is why getT is not returing the translation, because the lang is missing.

And related with this issue aralroca/next-translate#1118 is better to rename useTranslation to createTranslation or another name because useTranslation is not a hook now and can be conflictive with async components. We are going to do the change in future releases.

[brunoscopelliti]

@aralroca Thank you for your advices.
Ok, that works, but how I am supposed to render any other language than the default one?
Also, since useTranslation is not an hook any chance in a future version we could have the option to import from something different than "next-translate/useTranslation"?

[aralroca]

@aralroca Thank you for your advices. Ok, that works, but how I am supposed to render any other language than the default one?

It's using the language of the dynamic route /[lang], if you need another one you can use getT, but passing the correct language instead of undefined.

Also, since useTranslation is not an hook any chance in a future version we could have the option to import from something different than "next-translate/useTranslation"?

Yes, this is the idea. Something like "next-translate/createTranslation" or another name (not sure the final name yet)