Next.js Dynamic I18nProvider with chunked LinguiJS messages

_app.tsx

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>
  )
}

MessagesProvider.tsx

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>;
}