Improve tree shaking and dynamic loading, fix translations in production build. Moved i18n settings to the application's side.

packages/i18n/src/i18n-provider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { i18n } from 'i18next';
+import type { InitOptions, i18n } from 'i18next';
 
 let client: i18n;
 
@@ -10,28 +10,28 @@ type Resolver = (
 ) => Promise<Record<string, string>>;
 
 export function I18nProvider({
-  lang,
+  settings,
   children,
   resolver,
 }: React.PropsWithChildren<{
-  lang: string;
+  settings: InitOptions;
   resolver: Resolver;
 }>) {
   if (!client) {
-    throw withI18nClient(lang, resolver);
+    throw withI18nClient(settings, resolver);
   }
 
   return children;
 }
 
-async function withI18nClient(lang: string, resolver: Resolver) {
+async function withI18nClient(settings: InitOptions, resolver: Resolver) {
   if (typeof window !== 'undefined') {
     const { initializeI18nClient } = await import('./i18n.client');
 
-    client = await initializeI18nClient(lang, resolver);
+    client = await initializeI18nClient(settings, resolver);
   } else {
     const { initializeServerI18n } = await import('./i18n.server');
 
-    client = await initializeServerI18n(lang, resolver);
+    client = await initializeServerI18n(settings, resolver);
   }
 }

packages/i18n/src/i18n.client.ts

@@ -1,26 +1,23 @@
-import i18next, { i18n } from 'i18next';
+import i18next, { type InitOptions, i18n } from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import resourcesToBackend from 'i18next-resources-to-backend';
 import { initReactI18next } from 'react-i18next';
 
-import { I18N_COOKIE_NAME, getI18nSettings } from './i18n.settings';
-
+/**
+ * Initialize the i18n instance on the client.
+ * @param settings - the i18n settings
+ * @param resolver - a function that resolves the i18n resources
+ */
 export function initializeI18nClient(
-  lng: string | undefined,
-  i18nResolver: (lang: string, namespace: string) => Promise<object>,
+  settings: InitOptions,
+  resolver: (lang: string, namespace: string) => Promise<object>,
 ): Promise<i18n> {
-  const settings = getI18nSettings(lng);
-
-  if (i18next.isInitialized) {
-    return Promise.resolve(i18next);
-  }
-
   return new Promise<i18n>((resolve, reject) => {
     void i18next
       .use(initReactI18next)
       .use(
         resourcesToBackend(async (language, namespace, callback) => {
-          const data = await i18nResolver(language, namespace);
+          const data = await resolver(language, namespace);
 
           return callback(null, data);
         }),
@@ -32,7 +29,7 @@ export function initializeI18nClient(
           detection: {
             order: ['htmlTag', 'cookie', 'navigator'],
             caches: ['cookie'],
-            lookupCookie: I18N_COOKIE_NAME,
+            lookupCookie: 'lang',
           },
           interpolation: {
             escapeValue: false,

packages/i18n/src/i18n.server.ts

@@ -1,35 +1,25 @@
-import { createInstance } from 'i18next';
+import { type InitOptions, createInstance } from 'i18next';
 import resourcesToBackend from 'i18next-resources-to-backend';
 import { initReactI18next } from 'react-i18next/initReactI18next';
 
-import { I18N_COOKIE_NAME, getI18nSettings, languages } from './i18n.settings';
-
-export function getLanguageCookie<
-  Cookies extends {
-    get: (name: string) => { value: string } | undefined;
-  },
->(cookies: Cookies) {
-  return cookies.get(I18N_COOKIE_NAME)?.value;
-}
-
+/**
+ * Initialize the i18n instance on the server.
+ * This is useful for RSC and SSR.
+ * @param settings - the i18n settings
+ * @param resolver - a function that resolves the i18n resources
+ */
 export async function initializeServerI18n(
-  lang: string | undefined,
-  i18nResolver: (language: string, namespace: string) => Promise<object>,
+  settings: InitOptions,
+  resolver: (language: string, namespace: string) => Promise<object>,
 ) {
   const i18nInstance = createInstance();
 
-  if (i18nInstance.isInitialized) {
-    return i18nInstance;
-  }
-
-  const settings = getI18nSettings(lang);
-
   await i18nInstance
     .use(initReactI18next)
     .use(
       resourcesToBackend(async (language, namespace, callback) => {
         try {
-          const data = await i18nResolver(language, namespace);
+          const data = await resolver(language, namespace);
 
           return callback(null, data);
         } catch (error) {
@@ -49,7 +39,7 @@ export async function initializeServerI18n(
 
 export function parseAcceptLanguageHeader(
   languageHeaderValue: string | null | undefined,
-  acceptedLanguages = languages,
+  acceptedLanguages: string[],
 ): string[] {
   // Return an empty array if the header value is not provided
   if (!languageHeaderValue) return [];

packages/i18n/src/i18n.settings.ts

@@ -1,46 +0,0 @@
-import { InitOptions } from 'i18next';
-
-const fallbackLng = 'en';
-
-export const languages: string[] = [fallbackLng];
-
-export const I18N_COOKIE_NAME = 'lang';
-
-/**
- * The default array of Internationalization (i18n) namespaces.
- * These namespaces are commonly used in the application for translation purposes.
- *
- * Add your own namespaces here
- **/
-export const defaultI18nNamespaces = [
-  'common',
-  'auth',
-  'account',
-  'teams',
-  'billing',
-  'marketing',
-];
-
-export function getI18nSettings(
-  language: string | undefined,
-  ns: string | string[] = defaultI18nNamespaces,
-): InitOptions {
-  let lng = language ?? fallbackLng;
-
-  if (!languages.includes(lng)) {
-    console.warn(
-      `Language "${lng}" is not supported. Falling back to "${fallbackLng}"`,
-    );
-
-    lng = fallbackLng;
-  }
-
-  return {
-    supportedLngs: languages,
-    fallbackLng,
-    lng,
-    fallbackNS: defaultI18nNamespaces,
-    defaultNS: defaultI18nNamespaces,
-    ns,
-  };
-}