Question: How to Insert Line Breaks Using Params in One Language Only

[tk1024]

Due to the varying lengths of text across languages, there are instances where I want to insert line break tags exclusively in a specific language. Here is a sample code illustrating this:

en.ts

export default {
  hello: "Hello {br}World"
} as const

ja.ts

export default {
  hello: "こんにちは"
} as const

In this scenario, when Japanese is set as the default language, attempting to insert params as shown below results in a type error.

<div>{t("hello", { br: <br /> })}</div>

Is there a way to reference both English and Japanese translation files and specify params if they are included in either language?

[addlistener]

like this? locale === 'ja' ? "": "<br/>"

[tk1024]

like this? locale === 'ja' ? "": "
"

I think different.

I have provided the code in codesandbox to make it easier to understand the intent. codesandbox

en.ts

export default {
  "hello.world": "Hello {br_en}World",
} as const;

fr.ts

export default {
  "hello.world": "Bonjour {br_fr}le monde !",
} as const;

page.tsx

import { getI18n, getScopedI18n } from "../../locales/server";

export default async function Page() {
  const t = await getI18n();
  const scopedT = await getScopedI18n("hello");

  return (
    <div>
      <p>
        {t("hello.world", {
          br_en: <br />,
          // br_fr: <br />, // TypeError when uncommenting
        })}
      </p>
    </div>
  );
}