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

apps/web/lib/i18n/i18n.resolver.ts

@@ -3,15 +3,9 @@
  *
  */
 export async function i18nResolver(language: string, namespace: string) {
-  try {
-    const { default: data } = await import(
-      `../../public/locales/${language}/${namespace}.json`
+  const data = await import(
+    `../../public/locales/${language}/${namespace}.json`,
     );
 
-    return data as Record<string, string>;
-  } catch (e) {
-    console.error('Could not load translation file', e);
-
-    return {} as Record<string, string>;
-  }
+  return data as Record<string, string>;
 }

apps/web/lib/i18n/i18n.server.ts

@@ -1,11 +1,16 @@
 import { cookies, headers } from 'next/headers';
 
 import {
-  getLanguageCookie,
   initializeServerI18n,
   parseAcceptLanguageHeader,
 } from '@kit/i18n/server';
 
+import {
+  I18N_COOKIE_NAME,
+  getI18nSettings,
+  languages,
+} from '~/lib/i18n/i18n.settings';
+
 import { i18nResolver } from './i18n.resolver';
 
 /**
@@ -18,10 +23,22 @@ import { i18nResolver } from './i18n.resolver';
  */
 export function createI18nServerInstance() {
   const acceptLanguage = headers().get('accept-language');
-  const cookie = getLanguageCookie(cookies());
+  const cookie = cookies().get(I18N_COOKIE_NAME)?.value;
 
-  const language =
-    cookie ?? parseAcceptLanguageHeader(acceptLanguage)[0] ?? undefined;
+  let language =
+    cookie ??
+    parseAcceptLanguageHeader(acceptLanguage, languages)[0] ??
+    languages[0];
 
-  return initializeServerI18n(language, i18nResolver);
+  if (!languages.includes(language ?? '')) {
+    console.warn(
+      `Language "${language}" is not supported. Falling back to "${languages[0]}"`,
+    );
+
+    language = languages[0];
+  }
+
+  const settings = getI18nSettings(language);
+
+  return initializeServerI18n(settings, i18nResolver);
 }

apps/web/lib/i18n/i18n.settings.ts

@@ -0,0 +1,65 @@
+import { InitOptions } from 'i18next';
+
+/**
+ * The default language of the application.
+ * This is used as a fallback language when the selected language is not supported.
+ *
+ */
+const defaultLanguage = process.env.NEXT_PUBLIC_LOCALE ?? 'en';
+
+/**
+ * The list of supported languages.
+ * By default, only the default language is supported.
+ * Add more languages here if needed.
+ */
+export const languages: string[] = [defaultLanguage];
+
+/**
+ * The name of the cookie that stores the selected language.
+ */
+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',
+];
+
+/**
+ * Get the i18n settings for the given language and namespaces.
+ * If the language is not supported, it will fall back to the default language.
+ * @param language
+ * @param ns
+ */
+export function getI18nSettings(
+  language: string | undefined,
+  ns: string | string[] = defaultI18nNamespaces,
+): InitOptions {
+  let lng = language ?? defaultLanguage;
+
+  if (!languages.includes(lng)) {
+    console.warn(
+      `Language "${lng}" is not supported. Falling back to "${defaultLanguage}"`,
+    );
+
+    lng = defaultLanguage;
+  }
+
+  return {
+    supportedLngs: languages,
+    fallbackLng: defaultLanguage,
+    lng,
+    fallbackNS: defaultI18nNamespaces,
+    defaultNS: defaultI18nNamespaces,
+    ns,
+  };
+}