Added i18n

.drone.yml

@@ -26,33 +26,6 @@ trigger:
 
 ---
 
-# kind: pipeline
-# type: ssh
-# name: restart backend
-
-# server:
-#   host: 188.242.77.16:8822
-#   user: ubuntu
-#   ssh_key:
-#     from_secret: ssh_private_key_rpi
-
-# clone:
-#   disable: true
-
-# steps:
-# - name: restart backend
-#   commands:
-#   - pm2 restart warframe-center-gather
-
-# depends_on:
-# - install dependencies
-
-# trigger:
-#   branch:
-#   - monorepo
-
-# ---
-
 kind: pipeline
 type: docker
 name: build

app/.eslintrc.json

@@ -1,3 +1,11 @@
 {
-  "extends": ["standard", "standard-jsx", "standard-react", "next/core-web-vitals"]
+  "extends": ["standard", "standard-jsx", "standard-react", "next/core-web-vitals"],
+  "rules": {
+    "import/order": [
+      "error",
+      {
+        "newlines-between": "always"
+      }
+    ]
+  }
 }

app/components/layout.js

@@ -1,7 +1,8 @@
 import Head from 'next/head'
-import Footer from './Footer'
 import { YMInitializer } from 'react-yandex-metrika'
 
+import Footer from './Footer'
+
 export default function Layout ({ children }) {
   return (
     <>

app/next-i18next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'ru']
+  }
+}

app/next.config.js

@@ -1,8 +1,10 @@
 const withPlugins = require('next-compose-plugins')
+const { i18n } = require('./next-i18next.config')
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true
+  reactStrictMode: true,
+  i18n
   // webpack: (config, { webpack }) => {
   //   return config
   // },

app/package.json

@@ -13,6 +13,7 @@
     "@mui/x-data-grid": "^5.6.1",
     "next": "latest",
     "next-compose-plugins": "^2.2.1",
+    "next-i18next": "^11.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-moment": "^1.1.1",

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']))
     }
   }
 }

app/public/locales/en/home.json

@@ -0,0 +1,3 @@
+{
+  "description": "Find a profitable difference between the price of the set and the price of the sum of it's parts."
+}

app/public/locales/ru/home.json

@@ -0,0 +1,3 @@
+{
+  "description": "Находи выгодную разницу между ценой набора и ценой его частей по отдельности."
+}