changes

src/app/[locale]/layout.tsx

@@ -0,0 +1,20 @@
+import { useLinguiSSR } from "@/i18n/i18n";
+import { LinguiProvider } from "@/i18n/lingui-provider";
+import { Trans } from "@lingui/macro";
+
+export default async function LocaleLayout({
+  params,
+  children,
+}: {
+  params: any;
+  children: React.ReactNode;
+}) {
+  const i18n = await useLinguiSSR(params.locale);
+
+  return (
+    <LinguiProvider locale={i18n.locale} messages={i18n.messages}>
+      <Trans>Locale Layout</Trans>
+      {children}
+    </LinguiProvider>
+  );
+}

src/app/[locale]/nested/page.tsx

@@ -0,0 +1,22 @@
+import { Trans } from "@lingui/macro";
+import { useLinguiSSR } from "@/i18n/i18n";
+import Link from "next/link";
+
+export default async function Nested({ params }) {
+  // without this, the page crashes when navigating from the parent page (no full refresh)
+  // uncomment it to make it work in all cases.
+  //await useLinguiSSR(params.locale);
+
+  return (
+    <>
+      <br />
+      <Trans>Nested page</Trans>
+      <br />
+      <Link href={`/${params.locale}`}>
+        <Trans>
+          <b>Parent page</b>
+        </Trans>
+      </Link>
+    </>
+  );
+}

src/app/[locale]/page.tsx

@@ -1,36 +1,23 @@
 import Image from 'next/image';
 import styles from './page.module.css';
-import { setI18n } from '../../i18n/i18n';
-import { loadCatalog } from '../../i18n/utils';
-import { setupI18n } from '@lingui/core';
 import { Trans } from '@lingui/macro';
 import { ClientComponent } from './client-component';
 import { Switcher } from './components/Switcher';
-import { LinguiProvider } from '../../i18n/lingui-provider';
+import Link from "next/link";
+import { useLinguiSSR } from '@/i18n/i18n';
 
-export default async function Home({ params }) {
-  const catalog = await loadCatalog(params.locale);
-
-  const i18nSetupData = {
-    locale: params.locale,
-    messages: { [params.locale]: catalog },
-  };
-
-  const i18n = setupI18n(i18nSetupData);
-
-  setI18n(
-    i18n,
-  );
+export default async function Home({params}) {
+  // this is not needed here because we have the context from the layout, but it crashes when navigating from the nested page.
+  // uncomment it to make it work in all cases.
+   //await useLinguiSSR(params.locale);
 
   return (
     <main className={styles.main}>
       <div className={styles.description}>
+        <Link href={`${params.locale}/nested`}><Trans><b>Nested page</b></Trans></Link>
         <Trans>Plural Test: How many developers?</Trans>
-
-        <LinguiProvider {...i18nSetupData}>
-          <ClientComponent></ClientComponent>
-          <Switcher></Switcher>
-        </LinguiProvider>
+        <ClientComponent></ClientComponent>
+        <Switcher></Switcher>
 
         <p>
           Get started by editing&nbsp;

src/i18n/i18n.ts

@@ -1,5 +1,22 @@
 import { cache } from 'react';
-import { I18n } from '@lingui/core';
+import { I18n, setupI18n } from '@lingui/core';
+import { loadCatalog } from "@/i18n/utils";
+
+
+export async function useLinguiSSR(locale?: string): Promise<I18n> {
+  if (!getLocaleCtx().current && locale) {
+    const catalog = await loadCatalog(locale);
+
+    const i18n = setupI18n({
+      locale,
+      messages: { [locale]: catalog }
+    });
+
+    setI18n(i18n);
+  }
+
+  return getLocaleCtx().current as I18n;
+}
 
 export function setI18n(locale: I18n) {
   getLocaleCtx().current = locale;
@@ -9,6 +26,6 @@ export function getI18n(): I18n | undefined {
   return getLocaleCtx().current;
 }
 
-const getLocaleCtx = cache((): {current: I18n | undefined} => {
-  return {current: undefined};
+const getLocaleCtx = cache((): { current: I18n | undefined } => {
+  return { current: undefined };
 })

src/i18n/rsc-trans.tsx

@@ -1,14 +1,16 @@
 import React from "react"
 
-import { getI18n } from './i18n';
+import { useLinguiSSR} from './i18n';
 import { TransNoContext, TransProps } from '@lingui/react/server';
 
-export function Trans(props: TransProps): React.ReactElement<any, any> | null {
-  const i18n = getI18n()
+
+
+export async function Trans(props: TransProps): Promise<React.ReactElement<any, any> | null> {
+  const i18n = await useLinguiSSR();
 
   if (!i18n) {
     throw new Error('Lingui for RSC is not initialized. Use `setI18n()` first in root of your RSC tree.');
   }
 
-  return <TransNoContext {...props} lingui={{ i18n }}/>
+  return <TransNoContext {...props} lingui={{i18n}}/>
 }

src/locales/en.po

@@ -13,35 +13,59 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#. js-lingui-explicit-id
+#: src/components/AboutText.tsx:6
+#~ msgid "next-explanation"
+#~ msgstr "Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web applications. It is a production-ready framework that allows developers to quickly create static and dynamic JAMstack websites and is used widely by many large companies."
+
 #: src/components/Developers.tsx:20
-msgid "{selected, plural, one {Developer} other {Developers}}"
-msgstr "{selected, plural, one {Developer} other {Developers}}"
+#~ msgid "{selected, plural, one {Developer} other {Developers}}"
+#~ msgstr "{selected, plural, one {Developer} other {Developers}}"
+
+#: src/app/[locale]/page.tsx:16
+msgid "<0>Nested page</0>"
+msgstr "<0>Nested page</0>"
+
+#: src/app/[locale]/nested/page.tsx:16
+msgid "<0>Parent page</0>"
+msgstr "<0>Parent page</0>"
 
-#: src/components/Switcher.tsx:10
+#: src/app/[locale]/components/Switcher.tsx:11
 msgid "English"
 msgstr "English"
 
-#. js-lingui-explicit-id
-#: src/components/AboutText.tsx:6
-msgid "next-explanation"
-msgstr "Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web applications. It is a production-ready framework that allows developers to quickly create static and dynamic JAMstack websites and is used widely by many large companies."
+#: src/app/[locale]/client-component.tsx:6
+msgid "I'm Client Component"
+msgstr "I'm Client Component"
+
+#: src/app/[locale]/layout.tsx:16
+msgid "Locale Layout"
+msgstr "Locale Layout"
+
+#: src/app/[locale]/nested/page.tsx:13
+msgid "Nested page"
+msgstr "Nested page"
+
+#: src/app/[locale]/nested/page.tsx:13
+#~ msgid "Parent page"
+#~ msgstr "Parent page"
 
-#: src/components/Developers.tsx:9
+#: src/app/[locale]/page.tsx:17
 msgid "Plural Test: How many developers?"
 msgstr "Plural Test: How many developers?"
 
-#: src/components/Switcher.tsx:11
+#: src/app/[locale]/components/Switcher.tsx:12
 msgid "Serbian"
 msgstr "Serbian"
 
-#: src/components/Switcher.tsx:12
+#: src/app/[locale]/components/Switcher.tsx:13
 msgid "Spanish"
 msgstr "Spanish"
 
 #: src/pages/index.tsx:28
-msgid "Translation Demo"
-msgstr "Translation Demo"
+#~ msgid "Translation Demo"
+#~ msgstr "Translation Demo"
 
 #: src/pages/index.tsx:35
-msgid "Welcome to <0>Next.js!</0>"
-msgstr "Welcome to <0>Next.js!</0>"
+#~ msgid "Welcome to <0>Next.js!</0>"
+#~ msgstr "Welcome to <0>Next.js!</0>"

src/locales/es.po

@@ -13,35 +13,59 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#. js-lingui-explicit-id
+#: src/components/AboutText.tsx:6
+#~ msgid "next-explanation"
+#~ msgstr "Next.js es un marco de trabajo web de desarrollo front-end de React de código abierto que permite funciones como la representación del lado del servidor y la generación de sitios web estáticos para aplicaciones web basadas en React. Es un marco listo para producción que permite a los desarrolladores crear rápidamente sitios web JAMstack estáticos y dinámicos y es ampliamente utilizado por muchas grandes empresas."
+
 #: src/components/Developers.tsx:20
-msgid "{selected, plural, one {Developer} other {Developers}}"
-msgstr "{selected, plural, one {Programador} other {Programadores}}"
+#~ msgid "{selected, plural, one {Developer} other {Developers}}"
+#~ msgstr "{selected, plural, one {Programador} other {Programadores}}"
+
+#: src/app/[locale]/page.tsx:16
+msgid "<0>Nested page</0>"
+msgstr "Pagina anidada"
+
+#: src/app/[locale]/nested/page.tsx:16
+msgid "<0>Parent page</0>"
+msgstr "Pagina padre"
 
-#: src/components/Switcher.tsx:10
+#: src/app/[locale]/components/Switcher.tsx:11
 msgid "English"
 msgstr "Inglés"
 
-#. js-lingui-explicit-id
-#: src/components/AboutText.tsx:6
-msgid "next-explanation"
-msgstr "Next.js es un marco de trabajo web de desarrollo front-end de React de código abierto que permite funciones como la representación del lado del servidor y la generación de sitios web estáticos para aplicaciones web basadas en React. Es un marco listo para producción que permite a los desarrolladores crear rápidamente sitios web JAMstack estáticos y dinámicos y es ampliamente utilizado por muchas grandes empresas."
+#: src/app/[locale]/client-component.tsx:6
+msgid "I'm Client Component"
+msgstr "Soy componente cliente"
+
+#: src/app/[locale]/layout.tsx:16
+msgid "Locale Layout"
+msgstr "Layout localizado"
+
+#: src/app/[locale]/nested/page.tsx:13
+msgid "Nested page"
+msgstr "Pagina anidada"
+
+#: src/app/[locale]/nested/page.tsx:13
+#~ msgid "Parent page"
+#~ msgstr "Pagina padre"
 
-#: src/components/Developers.tsx:9
+#: src/app/[locale]/page.tsx:17
 msgid "Plural Test: How many developers?"
 msgstr "Prueba Plural: Cuantos programadores?"
 
-#: src/components/Switcher.tsx:11
+#: src/app/[locale]/components/Switcher.tsx:12
 msgid "Serbian"
 msgstr "Serbio"
 
-#: src/components/Switcher.tsx:12
+#: src/app/[locale]/components/Switcher.tsx:13
 msgid "Spanish"
 msgstr "Español"
 
 #: src/pages/index.tsx:28
-msgid "Translation Demo"
-msgstr "Demostración de Traducción"
+#~ msgid "Translation Demo"
+#~ msgstr "Demostración de Traducción"
 
 #: src/pages/index.tsx:35
-msgid "Welcome to <0>Next.js!</0>"
-msgstr "Bienvenido a <0>Next.js!</0>"
+#~ msgid "Welcome to <0>Next.js!</0>"
+#~ msgstr "Bienvenido a <0>Next.js!</0>"