fix: handle translation with lingui

The previous method was not working so I tried a different approach.
Translation is loaded but I'm still getting warnings:
* Plurals for locale undefined aren't loaded
* Text content did not match
I can't figure how to fix them...

1 files changed, 8 insertions, 20 deletions

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index a22c616..db021f9 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,31 +1,19 @@
-import { useEffect, useRef } from 'react';
-import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
 import { AppPropsWithLayout } from '@ts/types/app';
-import { initTranslation } from '@utils/helpers/i18n';
+import { activateLocale, defaultLocale, initLingui } from '@utils/helpers/i18n';
 import '../styles/globals.scss';
 import { ThemeProvider } from 'next-themes';
 
-initTranslation(i18n);
+initLingui(defaultLocale);
 
-function MyApp({ Component, pageProps }: AppPropsWithLayout) {
-  const router = useRouter();
-  const locale: string = router.locale || router.defaultLocale!;
-  const firstRender = useRef(true);
-
-  if (pageProps.translation && firstRender.current) {
-    i18n.load(locale, pageProps.translation);
-    i18n.activate(locale);
-    firstRender.current = false;
-  }
+const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
+  const locale: string = pageProps.locale || defaultLocale;
 
   useEffect(() => {
-    if (pageProps.translation) {
-      i18n.load(locale, pageProps.translation);
-      i18n.activate(locale);
-    }
-  }, [locale, pageProps.translation]);
+    activateLocale(locale, pageProps.translation);
+  });
 
   const getLayout = Component.getLayout ?? ((page) => page);
   return (
@@ -39,6 +27,6 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       </ThemeProvider>
     </I18nProvider>
   );
-}
+};
 
 export default MyApp;