refactor i18n to be server side

src/components/services/widget.jsx

@@ -1,5 +1,5 @@
-import { useTranslation } from "react-i18next";
 import dynamic from "next/dynamic";
+import { useTranslation } from "next-i18next";
 
 const Sonarr = dynamic(() => import("./widgets/service/sonarr"));
 const Radarr = dynamic(() => import("./widgets/service/radarr"));

src/components/services/widgets/service/adguard.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/bazarr.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/coinmarketcap.jsx

@@ -1,6 +1,6 @@
 import useSWR from "swr";
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 import classNames from "classnames";
 
 import Widget from "../widget";

src/components/services/widgets/service/docker.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/emby.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 import { BsVolumeMuteFill, BsFillPlayFill, BsPauseFill, BsCpu, BsFillCpuFill } from "react-icons/bs";
 import { MdOutlineSmartDisplay } from "react-icons/md";
 

src/components/services/widgets/service/gotify.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/jackett.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/jellyseerr.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/lidarr.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/mastodon.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/npm.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/nzbget.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/ombi.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/overseerr.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/pihole.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/portainer.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/prowlarr.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/qbittorrent.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/radarr.jsx

@@ -1,10 +1,9 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";
 
-import { formatApiUrl } from "utils/api-helpers";
 
 export default function Radarr({ service }) {
   const { t } = useTranslation();

src/components/services/widgets/service/readarr.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/rutorrent.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/sabnzbd.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/sonarr.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/speedtest.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/strelaysrv.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/tautulli.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 import { BsFillPlayFill, BsPauseFill, BsCpu, BsFillCpuFill } from "react-icons/bs";
 import { MdOutlineSmartDisplay, MdSmartDisplay } from "react-icons/md";
 

src/components/services/widgets/service/traefik.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/services/widgets/service/transmission.jsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Widget from "../widget";
 import Block from "../block";

src/components/version.jsx

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 import useSWR from "swr";
 import { compareVersions } from "compare-versions";
 import { MdNewReleases } from "react-icons/md";

src/components/widgets/datetime/datetime.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 const textSizes = {
   "4xl": "text-4xl",

src/components/widgets/openweathermap/weather.jsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { BiError } from "react-icons/bi";
 import { WiCloudDown } from "react-icons/wi";
 import { MdLocationDisabled, MdLocationSearching } from "react-icons/md";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Icon from "./icon";
 

src/components/widgets/resources/cpu.jsx

@@ -1,7 +1,7 @@
 import useSWR from "swr";
 import { FiCpu } from "react-icons/fi";
 import { BiError } from "react-icons/bi";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import UsageBar from "./usage-bar";
 

src/components/widgets/resources/disk.jsx

@@ -1,7 +1,7 @@
 import useSWR from "swr";
 import { FiHardDrive } from "react-icons/fi";
 import { BiError } from "react-icons/bi";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import UsageBar from "./usage-bar";
 

src/components/widgets/resources/memory.jsx

@@ -1,7 +1,7 @@
 import useSWR from "swr";
 import { FaMemory } from "react-icons/fa";
 import { BiError } from "react-icons/bi";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import UsageBar from "./usage-bar";
 

src/components/widgets/search/search.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 import { FiSearch } from "react-icons/fi";
 import { SiDuckduckgo, SiMicrosoftbing, SiGoogle } from "react-icons/si";
 

src/components/widgets/weather/weather.jsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { BiError } from "react-icons/bi";
 import { WiCloudDown } from "react-icons/wi";
 import { MdLocationDisabled, MdLocationSearching } from "react-icons/md";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 
 import Icon from "./icon";
 

src/pages/_app.jsx

@@ -1,11 +1,12 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { SWRConfig } from "swr";
+import { appWithTranslation } from "next-i18next";
 
 import "styles/globals.css";
 import "styles/theme.css";
 import "styles/manrope.css";
+import nextI18nextConfig from "../../next-i18next.config";
 
-import "utils/i18n";
 import { ColorProvider } from "utils/color-context";
 import { ThemeProvider } from "utils/theme-context";
 import { SettingsProvider } from "utils/settings-context";
@@ -28,4 +29,4 @@ function MyApp({ Component, pageProps }) {
   );
 }
 
-export default MyApp;
+export default appWithTranslation(MyApp, nextI18nextConfig);

src/pages/index.jsx

@@ -2,9 +2,10 @@
 import useSWR from "swr";
 import Head from "next/head";
 import dynamic from "next/dynamic";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 import { useEffect, useContext } from "react";
 import { BiError } from "react-icons/bi";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
 import ServicesGroup from "components/services/group";
 import BookmarksGroup from "components/bookmarks/group";
@@ -30,7 +31,7 @@ const Version = dynamic(() => import("components/version"), {
 
 const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search", "datetime"];
 
-export function getStaticProps() {
+export async function getStaticProps() {
   let logger;
   try {
     logger = createLogger("index");
@@ -39,6 +40,7 @@ export function getStaticProps() {
     return {
       props: {
         initialSettings: settings,
+        ...(await serverSideTranslations(settings.language ?? "en")),
       },
     };
   } catch (e) {
@@ -48,6 +50,7 @@ export function getStaticProps() {
     return {
       props: {
         initialSettings: {},
+        ...(await serverSideTranslations("en")),
       },
     };
   }

src/utils/i18n.js

@@ -1,50 +0,0 @@
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
-import Backend from "i18next-http-backend";
-import LanguageDetector from "i18next-browser-languagedetector";
-import prettyBytes from "pretty-bytes";
-
-i18n
-  .use(Backend)
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    fallbackLng: "en",
-    ns: ["common"],
-    // debug: process.env.NODE_ENV === "development",
-    defaultNS: "common",
-    nonExplicitSupportedLngs: true,
-    interpolation: {
-      escapeValue: false,
-    },
-    backend: {
-      loadPath: "/locales/{{lng}}/{{ns}}.json",
-    },
-  });
-
-i18n.services.formatter.add("bytes", (value, lng, options) =>
-  prettyBytes(parseFloat(value), { locale: lng, ...options })
-);
-
-i18n.services.formatter.add("rate", (value, lng, options) => {
-  if (value === 0) return "0 Bps";
-
-  const bits = options.bits ? value : value / 8;
-  const k = 1024;
-  const dm = options.decimals ? options.decimals : 0;
-  const sizes = ["Bps", "Kbps", "Mbps", "Gbps", "Tbps", "Pbps", "Ebps", "Zbps", "Ybps"];
-
-  const i = Math.floor(Math.log(bits) / Math.log(k));
-
-  const formatted = new Intl.NumberFormat(lng, { maximumFractionDigits: dm, minimumFractionDigits: dm }).format(
-    parseFloat(bits / k ** i)
-  );
-
-  return `${formatted} ${sizes[i]}`;
-});
-
-i18n.services.formatter.add("percent", (value, lng, options) =>
-  new Intl.NumberFormat(lng, { style: "percent", ...options }).format(parseFloat(value) / 100.0)
-);
-
-export default i18n;