Added i18n

app/pages/_app.js

@@ -1,5 +1,7 @@
+import { appWithTranslation } from 'next-i18next'
 import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { CssBaseline } from '@mui/material'
+
 import 'reset-css'
 import '../styles/global.scss'
 import Layout from '../components/layout'
@@ -21,4 +23,4 @@ function App ({ Component, pageProps }) {
   )
 }
 
-export default App
+export default appWithTranslation(App)

app/pages/home/Hero.js

@@ -1,41 +1,44 @@
-import { Component } from 'react'
+import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
 import { Box } from '@mui/material'
+
 import logo from './assets/warframe_logo.png'
 
-export default class Hero extends Component {
-  render () {
-    return (
+const Hero = () => {
+  const { t } = useTranslation('home')
+
+  return (
+    <Box
+      sx={{
+        py: 12,
+        textAlign: 'center'
+      }}
+    >
       <Box
         sx={{
-          py: 12,
-          textAlign: 'center'
+          width: 400,
+          m: 'auto'
         }}
       >
-        <Box
-          sx={{
-            width: 400,
-            m: 'auto'
-          }}
-        >
-          <Image
-            src={logo}
-            alt='logo'
-            layout='responsive'
-            width={500}
-            height={300}
-          />
-        </Box>
-        <Box
-          sx={{
-            width: 400,
-            m: 'auto'
-          }}
-        >
-          <h1>Market Gaps</h1>
-          <p>Find a profitable difference between the price of the set and the price of the sum of it's parts.</p>
-        </Box>
+        <Image
+          src={logo}
+          alt='logo'
+          layout='responsive'
+          width={500}
+          height={300}
+        />
       </Box>
-    )
-  }
+      <Box
+        sx={{
+          width: 400,
+          m: 'auto'
+        }}
+      >
+        <h1>Market Gaps</h1>
+        <p>{t('description')}</p>
+      </Box>
+    </Box>
+  )
 }
+
+export default Hero

app/pages/home/index.js

@@ -1,6 +1,9 @@
 import { Component } from 'react'
-import dbConnect from '../../lib/dbConnect'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { models } from 'shared-stuff'
+
+import dbConnect from '../../lib/dbConnect'
+
 import Hero from './Hero'
 import Table from './Table'
 
@@ -22,20 +25,14 @@ export default class Home extends Component {
   }
 }
 
-export async function getServerSideProps () {
-  try {
-    await dbConnect()
-    const scanResults = await models.ScanResult.find({})
+export async function getServerSideProps ({ locale }) {
+  await dbConnect()
+  const scanResults = await models.ScanResult.find({})
 
-    return {
-      props: {
-        scanResults: JSON.parse(JSON.stringify(scanResults))
-      }
-    }
-  } catch (e) {
-    console.error(e)
-    return {
-      props: {}
+  return {
+    props: {
+      scanResults: JSON.parse(JSON.stringify(scanResults)),
+      ...(await serverSideTranslations(locale, ['common', 'home']))
     }
   }
 }