chore: update example (#82)

examples/nextjs-13/package.json

@@ -10,22 +10,22 @@
  "lingui:extract": "lingui extract"
  },
  "dependencies": {
- "@lingui/core": "^4.0.0-next.3",
- "@lingui/react": "^4.0.0-next.3",
- "@next/font": "13.1.2",
+ "@lingui/core": "^4.7.0",
+ "@lingui/react": "^4.7.0",
+ "@next/font": "14.1.0",
  "@types/node": "18.11.18",
  "@types/react": "18.0.26",
  "@types/react-dom": "18.0.10",
  "make-plural": "^7.2.0",
- "next": "13.1.2",
+ "next": "14.1.0",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "typescript": "4.9.4"
  },
  "devDependencies": {
- "@lingui/cli": "^4.0.0-next.3",
- "@lingui/loader": "^4.0.0-next.3",
- "@lingui/macro": "^4.0.0-next.3",
- "@lingui/swc-plugin": "^4.0.0-next.2"
+ "@lingui/cli": "^4.7.0",
+ "@lingui/loader": "^4.7.0",
+ "@lingui/macro": "^4.7.0",
+ "@lingui/swc-plugin": "4.0.6"
  }
 }

examples/nextjs-13/src/i18n.ts

@@ -1,5 +1,6 @@
 import { i18n, Messages } from '@lingui/core';
 import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 
 export const locales = [
  { twoLettersCode: 'en', label: 'English' },
@@ -14,7 +15,25 @@ export async function loadCatalog(locale: string) {
 export function useLinguiInit(messages: Messages) {
  const router = useRouter()
  const locale = router.locale || router.defaultLocale!
- i18n.loadAndActivate(locale, messages, false);
+ const isClient = typeof window !== 'undefined'
 
- return i18n;
+ if (!isClient && locale !== i18n.locale) {
+ // there is single instance of i18n on the server
+ // note: on the server, we could have an instance of i18n per supported locale
+ // to avoid calling loadAndActivate for (worst case) each request, but right now that's what we do
+ i18n.loadAndActivate({ locale, messages })
+ }
+ if (isClient && !i18n.locale) {
+ // first client render
+ i18n.loadAndActivate({ locale, messages })
+ }
+
+ useEffect(() => {
+ const localeDidChange = locale !== i18n.locale
+ if (localeDidChange) {
+ i18n.loadAndActivate({ locale, messages })
+ }
+ }, [locale])
+
+ return i18n
 }

examples/nextjs-13/src/pages/_app.tsx

@@ -4,7 +4,7 @@ import { I18nProvider } from '@lingui/react';
 import { useLinguiInit } from '../i18n';
 
 export default function MyApp({ Component, pageProps, router }: AppProps) {
- const i18n = useLinguiInit(pageProps.i18n);
+ const i18n = useLinguiInit(pageProps.translation)
 
  return (
  <I18nProvider i18n={i18n}>

examples/nextjs-13/src/pages/index.tsx

@@ -11,7 +11,7 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext): Promis
  props: {
  // we need to pass catalog to the client side to be able to **synchronously** consume it
  // on hydration phase. Otherwise, hydration mismatch would happend.
- i18n: await loadCatalog(ctx.locale as string),
+ translation: await loadCatalog(ctx.locale as string),
  }
  };
 }