Next i18next setup

components/MDX/MDX.tsx

@@ -330,7 +330,7 @@ export function getMDXComponents() {
   };
 }
 
-const mdxComponents = getMDXComponents();
+export const mdxComponents = getMDXComponents();
 
 interface MDXProviderProps {
   children: React.ReactNode;

components/NewsletterSubscribe.tsx

@@ -1,9 +1,9 @@
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 
 import { ButtonType } from '@/types/components/buttons/ButtonPropsType';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 
-import { useTranslation } from '../utils/i18n';
 import Button from './buttons/Button';
 import Loader from './Loader';
 import Heading from './typography/Heading';

components/buttons/GithubButton.tsx

@@ -1,7 +1,8 @@
+import { useTranslation } from 'next-i18next';
+
 import { ButtonIconPosition, ButtonSize } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';
-import { useTranslation } from '../../utils/i18n';
 import IconGithub from '../icons/Github';
 import Button from './Button';
 

components/link.tsx

@@ -1,8 +1,7 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
-import { defaultLanguage, languages } from '../utils/i18n';
-import i18nPaths from '../utils/i18nPaths';
+import { defaultLanguage, i18nPaths, languages }  from '@/utils/i18n';
 
 interface LinkComponentProps {
   children: React.ReactNode;
@@ -44,6 +43,7 @@ export default function LinkComponent({
 
   // Detect current language based on the path or query parameter
   const slug = asPath.split('/')[1];
+
   const langSlug = languages.includes(slug) && slug;
   const language: string = query.lang && typeof query.lang === 'string' ? query.lang : langSlug || defaultLanguage; // Ensure language is always a string
 

components/navigation/NavBar.tsx

@@ -1,10 +1,11 @@
 import Link from 'next/link';
 import type { NextRouter } from 'next/router';
 import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
 
-import { defaultLanguage, languages, useTranslation } from '../../utils/i18n';
-import i18nPaths from '../../utils/i18nPaths';
+import { defaultLanguage, i18nPaths, languages } from '@/utils/i18n';
+
 import { SearchButton } from '../AlgoliaSearch';
 import AsyncAPILogo from '../AsyncAPILogo';
 import GithubButton from '../buttons/GithubButton';

mdx-components.tsx

@@ -0,0 +1,10 @@
+import type { MDXComponents } from 'mdx/types';
+
+import { mdxComponents } from '@/components/MDX/MDX';
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+    mdxComponents
+  };
+}

next-i18next.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  i18n: {
+    locales: ['en', 'de'],
+    defaultLocale : 'en',
+    namespaces: ['landing-page', 'common', 'tools'],
+    defaultNamespace: 'landing-page',
+	react: { useSuspense: false },// this line
+  },
+
+};

next.config.mjs

@@ -15,14 +15,20 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true
   },
-  output: 'export',
+//   output: 'export',
   webpack(config, { isServer }) {
     if (!isServer) {
       config.resolve.fallback.fs = false;
     }
 
     return config;
-  }
+  },
+  'trailingSlash': true,
+//   i18n:{
+// 	defaultLocale: 'en',
+// 	locales: ['en', 'de'],
+// 	react: { useSuspense: false },// this line
+// }
 };
 
 const mdxConfig = withMDX({

package.json

@@ -70,7 +70,7 @@
     "fuse.js": "^7.0.0",
     "googleapis": "^133.0.0",
     "gray-matter": "^4.0.3",
-    "i18next": "^23.8.2",
+    "i18next": "^23.12.2",
     "jgexml": "^0.4.4",
     "js-cookie": "^3.0.5",
     "json-schema": "^0.4.0",
@@ -81,6 +81,8 @@
     "mermaid": "9.3.0",
     "moment": "^2.30.1",
     "next": "14.1.1",
+    "next-i18next": "^15.3.0",
+    "next-language-detector": "^1.1.0",
     "next-mdx-remote": "^4.4.1",
     "node-fetch": "^3.3.2",
     "node-fetch-2": "npm:node-fetch@^2.7.0",
@@ -90,7 +92,7 @@
     "react-dom": "^18",
     "react-ga": "^3.3.1",
     "react-gtm-module": "^2.0.11",
-    "react-i18next": "^14.0.5",
+    "react-i18next": "^14.1.3",
     "react-scrollspy": "^3.4.3",
     "react-syntax-highlighter": "^15.5.0",
     "react-text-truncate": "^0.19.0",
@@ -154,4 +156,4 @@
     "remark-mdx": "^3.0.1",
     "storybook": "^8.1.5"
   }
-}
+}