react-i18next

Author: igorweber

components/Menu.tsx

@@ -2,31 +2,29 @@ import styles from "./Menu.module.css";
 import { Panel } from "@navikt/ds-react";
 import { Helptext, Historic, Information, Send } from "@navikt/ds-icons";
 import StyledLink from "./StyledLink";
-import { useRouter } from "next/router";
-import allTexts, { LocalesType } from "../src/allTexts";
+import { useTranslation } from "react-i18next";
 
 export default function Menu() {
 
-  const router = useRouter();
-  const texts = allTexts[(router.locale || router.defaultLocale) as keyof LocalesType];
+  const { t } = useTranslation();
 
   return (
     <Panel className={styles.menu}>
       <StyledLink href="/">
         <Send aria-hidden />
-        {texts.menuSend}
+        {t("menuSend")}
       </StyledLink>
       <StyledLink href="/history">
         <Historic aria-hidden />
-        {texts.menuHistory}
+        {t("menuHistory")}
       </StyledLink>
       <StyledLink href="/about">
         <Information aria-hidden />
-        {texts.menuAbout}
+        {t("menuAbout")}
       </StyledLink>
       <StyledLink href="/faq">
         <Helptext aria-hidden />
-        {texts.menuFaq}
+        {t("menuFaq")}
       </StyledLink>
     </Panel>
   );

next.config.js

@@ -2,12 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-  output: 'standalone',
-  i18n: {
-    locales: ['nb', 'en'],
-    defaultLocale: 'nb',
-    localeDetection: false
-  },
+  output: 'standalone'
 };
 
 module.exports = nextConfig;

package-lock.json

@@ -18,6 +18,7 @@
     "next": "13.0.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-i18next": "^12.1.1",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

package.json

@@ -2,6 +2,47 @@ import "../../styles/globals.css";
 import "@navikt/ds-css";
 
 import type { AppProps } from "next/app";
+import { onLanguageSelect } from "@navikt/nav-dekoratoren-moduler";
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+i18n
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    debug: true,
+    fallbackLng: 'nb',
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+    resources: {
+      en: {
+        translation: {
+          "menuSend": "Send",
+          "menuHistory": "Previous report cards",
+          "menuAbout": "About",
+          "menuFaq": "FAQ",
+          "title": "New solution"
+        }
+      },
+      nb: {
+        translation: {
+          "menuSend": "Send",
+          "menuHistory": "Tidligere meldekort",
+          "menuAbout": "Om meldekort",
+          "menuFaq": "Ofte stilte spørsmål",
+          "title": "Ny løsning"
+        }
+      }
+    }
+  });
+
+onLanguageSelect((language) => {
+  i18n.changeLanguage(language.locale);
+});
 
 export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;

src/allTexts.ts

@@ -3,7 +3,6 @@ import {
   Components as DecoratorComponents,
   Env,
   fetchDecoratorReact,
-  Locale,
   Props as DecoratorProps
 } from "@navikt/nav-dekoratoren-moduler/ssr";
 
@@ -17,14 +16,14 @@ export default class MyDocument extends Document<DecoratorComponents> {
       availableLanguages: [
         {
           locale: "nb",
-          url: "/"
+          handleInApp: true
         },
         {
           locale: "en",
-          url: "/en"
+          handleInApp: true
         }
       ],
-      language: (ctx.locale || "nb") as Locale
+      language: "nb"
     };
 
     const Dekorator: DecoratorComponents = await fetchDecoratorReact({

src/pages/_app.tsx

@@ -3,13 +3,11 @@ import Menu from "../../components/Menu";
 import Spacer from "../../components/Spacer";
 import NavPanel from "../../components/NavPanel";
 import { format, getISOWeek } from "date-fns";
-import { useRouter } from "next/router";
-import allTexts, { LocalesType } from "../allTexts";
+import { useTranslation } from "react-i18next";
 
 export default function Page() {
 
-  const router = useRouter();
-  const texts = allTexts[(router.locale || router.defaultLocale) as keyof LocalesType];
+  const { t } = useTranslation();
 
   const data = [
     {
@@ -30,7 +28,7 @@ export default function Page() {
     <main>
       <Menu />
 
-      <h1>{texts.title}</h1>
+      <h1>{t('title')}</h1>
       <p>Du kan sende inn meldekort for følgende perioder:</p>
 
       <Table zebraStripes>