refactor: Add globalI18n (#986)

* refactor: Add globalI18n

* Update appWithTranslation.tsx

src/appWithTranslation.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import hoistNonReactStatics from 'hoist-non-react-statics'
 import { I18nextProvider } from 'react-i18next'
 import type { AppProps as NextJsAppProps } from 'next/app'
@@ -8,18 +8,21 @@ import createClient from './createClient'
 
 import { SSRConfig, UserConfig } from '../types'
 
-export { I18nContext, Trans, useTranslation, withTranslation } from 'react-i18next'
+import { i18n as I18NextClient } from 'i18next'
+export { Trans, useTranslation, withTranslation } from 'react-i18next'
 
 type AppProps = NextJsAppProps & {
   pageProps: SSRConfig
 }
 
+export let globalI18n: I18NextClient | null = null
+
 export const appWithTranslation = (
   WrappedComponent: React.ComponentType<AppProps> | React.ElementType<AppProps>,
   configOverride: UserConfig | null = null,
 ) => {
   const AppWithTranslation = (props: AppProps) => {
-    let i18n = null
+    let i18n: I18NextClient | null = null
     let locale = null
 
     if (props?.pageProps?._nextI18Next) {
@@ -48,19 +51,21 @@ export const appWithTranslation = (
         lng: initialLocale,
         resources: initialI18nStore,
       }))
+
+      useMemo(() => {
+        globalI18n = i18n
+      }, [i18n])
     }
 
     return i18n !== null ? (
-      (
-        <I18nextProvider
-          i18n={i18n}
-        >
-          <WrappedComponent
-            key={locale}
-            {...props}
-          />
-        </I18nextProvider>
-      )
+      <I18nextProvider
+        i18n={i18n}
+      >
+        <WrappedComponent
+          key={locale}
+          {...props}
+        />
+      </I18nextProvider>
     ) : (
       <WrappedComponent
         key={locale}

src/index.tsx

@@ -1,4 +1,4 @@
 export { I18nContext, Trans, useTranslation, withTranslation } from 'react-i18next'
 
-export { appWithTranslation } from './appWithTranslation'
+export { appWithTranslation, globalI18n as i18n } from './appWithTranslation'
 

types.d.ts

@@ -7,7 +7,7 @@ import {
   WithTranslation as ReactI18nextWithTranslation,
 } from 'react-i18next'
 import { InitOptions, i18n, TFunction as I18NextTFunction } from 'i18next'
-import { appWithTranslation } from './src'
+import { appWithTranslation, i18n } from './src'
 
 type NextJsI18NConfig = {
   defaultLocale: string
@@ -55,6 +55,7 @@ export type SSRConfig = {
 }
 
 export {
+  i18n,
   I18nContext,
   appWithTranslation,
   useTranslation,