🔀 merged branch dev

src/pages/404.tsx

@@ -10,6 +10,8 @@ import {
 } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+
 const useStyles = createStyles((theme) => ({
   root: {
     paddingTop: 80,
@@ -92,3 +94,12 @@ export default function Custom404() {
     </Container>
   );
 }
+
+export async function getStaticProps({ locale }: { locale: string }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ['404'])),
+      // Will be passed to the page component as props
+    },
+  };
+}

src/pages/_app.tsx

@@ -7,11 +7,12 @@ import { MantineProvider, ColorScheme, ColorSchemeProvider, MantineTheme } from
 import { NotificationsProvider } from '@mantine/notifications';
 import { useHotkeys } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
+import { appWithTranslation } from 'next-i18next';
 import { ConfigProvider } from '../tools/state';
 import { theme } from '../tools/theme';
 import { ColorTheme } from '../tools/color';
 
-export default function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
+function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
   const { Component, pageProps } = props;
   const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
 
@@ -83,3 +84,5 @@ export default function App(this: any, props: AppProps & { colorScheme: ColorSch
 App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
   colorScheme: getCookie('color-scheme', ctx) || 'light',
 });
+
+export default appWithTranslation(App);

src/pages/index.tsx

@@ -1,6 +1,8 @@
 import { getCookie, setCookie } from 'cookies-next';
 import { GetServerSidePropsContext } from 'next';
 import { useEffect } from 'react';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+
 import AppShelf from '../components/AppShelf/AppShelf';
 import LoadConfigComponent from '../components/Config/LoadConfig';
 import { Config } from '../tools/types';
@@ -13,18 +15,51 @@ import Layout from '../components/layout/Layout';
 export async function getServerSideProps({
   req,
   res,
+  locale,
 }: GetServerSidePropsContext): Promise<{ props: { config: Config } }> {
-  let cookie = getCookie('config-name', { req, res });
-  if (!cookie) {
+  let configName = getCookie('config-name', { req, res });
+  const configLocale = getCookie('config-locale', { req, res });
+  if (!configName) {
     setCookie('config-name', 'default', {
       req,
       res,
       maxAge: 60 * 60 * 24 * 30,
       sameSite: 'strict',
     });
-    cookie = 'default';
+    configName = 'default';
   }
-  return getConfig(cookie as string);
+
+  const translations = await serverSideTranslations((configLocale ?? locale) as string, [
+    'common',
+    'layout/app-shelf',
+    'layout/add-service-app-shelf',
+    'layout/app-shelf-menu',
+    'settings/common',
+    'settings/general/theme-selector',
+    'settings/general/config-changer',
+    'settings/general/internationalization',
+    'settings/general/module-enabler',
+    'settings/general/search-engine',
+    'settings/general/widget-positions',
+    'settings/customization/color-selector',
+    'settings/customization/page-appearance',
+    'settings/customization/shade-selector',
+    'settings/customization/app-width',
+    'settings/customization/opacity-selector',
+    'modules/common',
+    'modules/date',
+    'modules/calendar',
+    'modules/dlspeed',
+    'modules/search',
+    'modules/torrents-status',
+    'modules/weather',
+    'modules/ping',
+    'modules/docker',
+    'modules/dashdot',
+    'modules/overseerr',
+    'modules/common-media-cards',
+  ]);
+  return getConfig(configName as string, translations);
 }
 
 export default function HomePage(props: any) {