I have a Next.js application that uses Plasmic for generating some pages and components. Currently, I have implemented internationalization (i18n) using the next-i18next library, and I have a custom hook called usePlasmicTranslator to integrate translations with Plasmic components.
However, I want to switch from next-i18next to next-intl for handling translations. I need assistance in converting the usePlasmicTranslator hook to work with next-intl .
Existing Code: Here’s the current implementation of the usePlasmicTranslator hook using next-i18next :
import { PlasmicTranslator } from "@plasmicapp/loader-nextjs";
import { Trans, useTranslation } from "next-i18next";
import React from "react";
export function usePlasmicTranslator() {
const { t } = useTranslation();
const translator: PlasmicTranslator = (key, opts) => {
if (opts?.components) {
return (
<Trans
i18nKey={key}
components={opts.components as Record<string, React.ReactElement>}
/>
);
} else {
return t(key);
}
};
return translator;
}
Current implementation for next-intl (I need next-intl beacuse I want to translate both app and pages router)
import { PlasmicTranslator } from "@plasmicapp/loader-nextjs";
import { useTranslations } from 'next-intl';
import React from "react";
export function usePlasmicTranslator() {
const t = useTranslations();
const translator: PlasmicTranslator = (key, opts) => {
if (opts?.components) {
return t.rich(key, opts.components);
} else {
return t(key);
}
};
return translator;
}
Desired Outcome: I would like to have an updated version of the usePlasmicTranslator hook that utilizes next-intl for handling translations. The hook should provide the same functionality as before, allowing translations to be seamlessly integrated with Plasmic components. Additionally, any necessary configuration or setup steps for next-intl should be clearly explained.