How to handle SSR

I really like this library, but I have some problems getting it to work as I like using SSR (with nextjs). Basically, what I want is to render only the messages of the requested locale and have SSR do it’s work. Using Nextjs I can use a getInitialProps function, but the data is required to be serializable and that’s where the problem comes in; the compiled bundles contain pluralization functionality.

I think my three options are:

• ignore pluralization
• include all messages on the client (I don’t want to do this)
• include the pluralization library in the client

Am I missing something? Any help/ideas would be appreciated.

[rajuashok]

Just checking in here, looks like this is still an issue with this lib and it does not handle SSR and SSG on nextjs? Will try it out myself when I get a chance.

[TommasoAmici]

I have been using lingui with nextjs on https://fantaasta.com and I can get it to SSG pages with the default locale, but translations are done client-side. Ideally translated pages should be SSG too.

This is my setup:

// _app.tsx
import { dynamicActivate, plurals } from "@/lib/i18n";
import { messages } from "@/locale/it/messages";
import { Page } from "@/types/page";
import { i18n } from "@lingui/core";
import { I18nProvider } from "@lingui/react";
import type { AppProps } from "next/app";
import { useRouter } from "next/router";
import { useEffect } from "react";

i18n.load("it", messages);
i18n.loadLocaleData("it", { plurals: plurals["it"] });
i18n.activate("it");

function MyApp({ Component, pageProps }: AppProps & { Component: Page }) {
  const { locale } = useRouter();

  useEffect(() => {
    dynamicActivate(locale);
  }, [locale]);

  return <I18nProvider i18n={i18n}><Component {...pageProps} /></I18nProvider>;
}
export default MyApp;

// i18n.ts
import { i18n } from "@lingui/core";
import { en, it } from "make-plural/plurals";

export const plurals: { [language: string]: any } = {
  en,
  it,
};

/**
 * We do a dynamic import of just the catalog that we need
 * @param locale any locale string
 */
export const dynamicActivate = async (locale: string | undefined) => {
  const selectedLocale = locale ?? "it";
  const { messages } = await import(`@/locale/${selectedLocale}/messages`);
  i18n.load(selectedLocale, messages);
  i18n.loadLocaleData(selectedLocale, { plurals: plurals[selectedLocale] });
  i18n.activate(selectedLocale);
};