react-intl - app.tsx

import English from "../compiled-locales/en.json";
import German from "../compiled-locales/de.json";

function MyApp({ Component, pageProps }: AppProps) {
    const { locale } = useRouter();
    const [shortLocale] = locale ? locale.split("-") : ["en"];

    const messages = useMemo(() => {
        switch (shortLocale) {
            case "de":
                return German;
            case "en":
                return English;
            default:
                return English;
        }
    }, [shortLocale]);

    return (
        <IntlProvider
            locale={shortLocale}
            messages={messages}
            onError={() => null}>
            <FormattedMessage defaultMessage="bla bla" />
            <Component {...pageProps} />
        </IntlProvider>
    );
}

export default MyApp;