Skip to content

Instantly share code, notes, and snippets.

@radist2s
Created August 18, 2023 01:14
Show Gist options
  • Save radist2s/058be96c9f21eec7e8695bc62647ad81 to your computer and use it in GitHub Desktop.
Save radist2s/058be96c9f21eec7e8695bc62647ad81 to your computer and use it in GitHub Desktop.
Next.js Dynamic I18nProvider with chunked LinguiJS messages
const MessagesProviders = {
en: dynamic(async () => generateMessagesProvider('en', await import('./en/messages'))),
ka: dynamic(async () => generateMessagesProvider('ka', await import('./ka/messages'))),
};
const App = ({locale, pageProps}) => {
const MessageProvider = MessagesProviders[locale]
return (
<MessageProvider>
<Component {...pageProps} />
</MessageProvider>
)
}
import { Messages, setupI18n } from '@lingui/core';
import { I18nProvider } from '@lingui/react';
import { ReactNode, useState } from 'react';
export const generateMessagesProvider = async (
locale: string,
{ messages }: { messages: Messages }
) => {
return function LocaleMessagesProvider({ children }: { children: ReactNode }) {
return (
<MessagesProvider locale={locale} messages={messages}>
{children}
</MessagesProvider>
);
};
};
function MessagesProvider({
children,
messages,
locale,
}: {
children: ReactNode;
locale: string;
messages: Messages;
}) {
const [i18n] = useState(() =>
setupI18n({
locale,
locales: [locale, process.env.DEFAULT_LOCALE ?? 'en'],
messages: {
[locale]: messages,
},
})
);
return <I18nProvider i18n={i18n}>{children}</I18nProvider>;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment