Issue 2963: Adding Next-i18next for front-end translations

package.json

@@ -71,6 +71,7 @@
     "jsdom": "18.1.1",
     "linkify-html": "3.0.5",
     "linkifyjs": "3.0.5",
+    "next-i18next": "10.4.0",
     "node-fetch": "2.6.7",
     "normalize-url": "6.1.0",
     "opml-generator": "1.1.1",

src/web/next-i18next.config.js

@@ -0,0 +1,10 @@
+// this preloads the locales from web/public/locales
+module.exports = {
+  i18n: {
+    defaultLanguage: 'en',
+    defaultLocale: 'en',
+    fallbackLng: 'en',
+    locales: ['en', 'es'],
+  },
+  react: { useSuspense: false },
+};

src/web/next.config.js

@@ -11,6 +11,7 @@ const dotenv = require('dotenv');
 const withPlugins = require('next-compose-plugins');
 const withPWA = require('next-pwa');
 const runtimeCaching = require('next-pwa/cache');
+const { i18n } = require('./next-i18next.config');
 
 // Load an env file
 const loadApiUrlFromEnv = (envFile) => dotenv.config({ path: envFile });
@@ -81,5 +82,6 @@ module.exports = withPlugins([
       },
     },
   ],
+  { i18n },
   nextConfig,
 ]);

src/web/package.json

@@ -23,6 +23,7 @@
     "nanoid": "3.2.0",
     "next": "12.0.9",
     "next-compose-plugins": "2.2.1",
+    "next-i18next": "^10.4.0",
     "next-pwa": "5.4.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",

src/web/public/locales/en/common.json

@@ -0,0 +1,5 @@
+{
+  "aboutUs": "About Us",
+  "signIn": "Sign In",
+  "signOut": "Sign out"
+}

src/web/public/locales/es/common.json

@@ -0,0 +1,5 @@
+{
+  "aboutUs": "sobre nosotros",
+  "signIn": "Iniciar sesión",
+  "signOut": "Cerrar sesión"
+}

src/web/src/components/BannerButtons.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { makeStyles, Tooltip, withStyles, Zoom } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
+import { useTranslation } from 'next-i18next';
 import useAuth from '../hooks/use-auth';
 import TelescopeAvatar from './TelescopeAvatar';
 import PopUp from './PopUp';
@@ -53,6 +54,8 @@ const BannerButtons = () => {
 
   const router = useRouter();
 
+  const { t } = useTranslation(`common`);
+
   return (
     <div
       className={`${classes.buttonsContainer} ${
@@ -78,7 +81,7 @@ const BannerButtons = () => {
           }}
           variant="outlined"
         >
-          About us
+          {t('aboutUs')}
         </Button>
       </Link>
       {user?.isRegistered ? (
@@ -105,7 +108,7 @@ const BannerButtons = () => {
             onClick={() => login()}
             variant="outlined"
           >
-            Sign in
+            {t('signIn')}
           </Button>
           {/* Bandaid solution to avoid signing up */}
           {/* <Link href="/signup" passHref>

src/web/src/pages/_app.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { AppProps } from 'next/app';
 import { ThemeProvider } from '@material-ui/core/styles';
 import { SWRConfig } from 'swr';
+import { appWithTranslation } from 'next-i18next';
 
 import AuthProvider from '../components/AuthProvider';
 
@@ -49,4 +50,4 @@ const App = ({ Component, pageProps }: AppProps) => {
   );
 };
 
-export default App;
+export default appWithTranslation(App);