Merge pull request #78 from daritelska-platforma/bug-37-i18n-ssr

#37 SSR doesn't work for i18n

.eslintrc.js

@@ -20,7 +20,7 @@ module.exports = {
     node: true,
     jest: true,
   },
-  ignorePatterns: ['.eslintrc.js', 'next.config.js'],
+  ignorePatterns: ['.eslintrc.js', 'next.config.js', 'next-i18next.config.js'],
   rules: {
     '@typescript-eslint/interface-name-prefix': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',

CONTRIBUTING.md

@@ -127,7 +127,7 @@ A common way to sort the imports in the file is by their source: `external`, `ab
 
 ```tsx
 import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import Nav from 'components/layout/Nav'
 import Layout from 'components/layout/Layout'
@@ -418,7 +418,7 @@ Usage of translation hook `useTranslation` is preferred over usage of `<Trans />
 #### Usage in components
 
 ```tsx
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 export default function CustomComponent() {
   const { t } = useTranslation()
@@ -437,13 +437,13 @@ export default function CustomComponent() {
 
 ```tsx
 import { GetStaticProps } from 'next'
-import { serverSideTranslations } from 'common/useNextLocale'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import Page from 'components/forgottenPassword/ForgottenPasswordPage'
 
 export const getStaticProps: GetStaticProps = async ({ locale }) => ({
   props: {
-    i18nResources: await serverSideTranslations(locale, ['common', 'auth']), // List used namespaces
+    ...(await serverSideTranslations(locale ?? 'bg', ['common', 'auth'])), // List used namespaces
   },
 })
 

next-i18next.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  i18n: {
+    localeDetection: false,
+    defaultLocale: 'bg',
+    locales: ['bg', 'en'],
+  },
+}

next.config.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const { i18n } = require('./next-i18next.config')
 
 require('dotenv').config()
 
@@ -15,9 +16,5 @@ module.exports = {
     API_URL: process.env.API_URL,
     APP_URL: process.env.APP_URL,
   },
-  i18n: {
-    localeDetection: false,
-    locales: ['bg', 'en'],
-    defaultLocale: 'bg',
-  },
+  i18n,
 }

package.json

@@ -23,14 +23,13 @@
     "formik": "^2.2.6",
     "highcharts": "^9.0.1",
     "highcharts-react-official": "^3.0.0",
-    "i18next": "^19.8.4",
     "mobx": "^6.0.4",
     "mobx-react": "^7.0.5",
     "next": "^10.0.5",
     "next-auth": "^3.4.1",
+    "next-i18next": "^8.0.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-i18next": "^11.8.5",
     "react-in-viewport": "^1.0.0-alpha.16",
     "sass": "^1.32.4",
     "typewriter-effect": "^2.17.0",

public/locales/bg/common.json

@@ -13,6 +13,9 @@
     "changePassword": "Смяна на парола",
     "forgottenPassword": "Забравена парола?"
   },
+  "meta": {
+    "title": "Подкрепи БГ"
+  },
   "values": {
     "voluntary": {
       "heading": "Доброволно и про-боно",

public/locales/en/common.json

@@ -13,6 +13,9 @@
     "changePassword": "Change your password",
     "forgottenPassword": "Forgotten password?"
   },
+  "meta": {
+    "title": "Podkrepi BG"
+  },
   "values": {
     "voluntary": {
       "heading": "Voluntary and pro-bono",

src/common/form/README.md

@@ -5,7 +5,7 @@
 ```tsx
 import React from 'react'
 import * as yup from 'yup'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Grid, TextField, Button } from '@material-ui/core'
 
 import { AlertStore } from 'stores/AlertStore'

src/common/form/validation.ts

@@ -1,6 +1,6 @@
 import { setLocale } from 'yup'
 import { TOptions } from 'i18next'
-import { TFunction } from 'react-i18next'
+import { TFunction } from 'next-i18next'
 
 export type TranslatableField = (string | undefined) | { key: string; values?: TOptions }
 

src/components/about/AboutPage.tsx

@@ -1,6 +1,6 @@
 import { Typography } from '@material-ui/core'
 import Layout from 'components/layout/Layout'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import styles from './about.module.scss'
 

src/components/auth/changePassword/ChangePasswordPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Container } from '@material-ui/core'
 
 import Layout from 'components/layout/Layout'

src/components/auth/forgottenPassword/ForgottenPasswordForm.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import * as yup from 'yup'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Typography, Grid } from '@material-ui/core'
 
 import SubmitButton from 'components/common/form/SubmitButton'

src/components/auth/forgottenPassword/ForgottenPasswordPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Container } from '@material-ui/core'
 
 import Layout from 'components/layout/Layout'

src/components/auth/login/LoginForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import * as yup from 'yup'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Grid } from '@material-ui/core'
 import { AlertStore } from 'stores/AlertStore'
 

src/components/auth/login/LoginPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { signIn } from 'next-auth/client'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Container, Grid, Box, Button } from '@material-ui/core'
 
 import Link from 'components/common/Link'

src/components/auth/profile/ProfilePage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import {
   Avatar,
   Box,

src/components/auth/register/RegisterPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Container } from '@material-ui/core'
 
 import Layout from 'components/layout/Layout'

src/components/common/form/FormTextField.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { FormikValues } from 'formik'
 import { TextField, TextFieldProps } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import { translateError } from 'common/form/useForm'
 import { TranslatableField } from 'common/form/validation'

src/components/common/form/SubmitButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
 import { Button, ButtonProps, CircularProgress, CircularProgressProps } from '@material-ui/core'
 

src/components/index/helpers/Typewriter.tsx

@@ -1,5 +1,5 @@
 import Typewriter from 'typewriter-effect'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import { Typography } from '@material-ui/core'
 import { makeStyles, createStyles } from '@material-ui/core/styles'

src/components/index/helpers/chart/TeamPie.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Highcharts from 'highcharts'
 import HighchartsReact from 'highcharts-react-official'
 import { teamPieData, teamPieOptions, TeamPieItem } from 'components/index/helpers/chart/pieData'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import handleViewport from 'react-in-viewport'
 
 export type TeamPieProps = {

src/components/index/sections/ActivitySection.tsx

@@ -1,5 +1,5 @@
 import { Grid, Typography } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles((theme) =>

src/components/index/sections/Jumbotron.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import { Grid, Typography } from '@material-ui/core'
 import { makeStyles, createStyles } from '@material-ui/core/styles'

src/components/index/sections/ProblemsToSolveSection.tsx

@@ -1,5 +1,5 @@
 import { Grid, Typography } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 
 import CommissionsIcon from '../icons/problems-to-solve-icons/CommissionsIcon'

src/components/index/sections/SupportUsSection.tsx

@@ -1,5 +1,5 @@
 import { Grid, Typography } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 
 import FinancesIcon from '../icons/support-us-icons/FinancesIcon'

src/components/index/sections/TeamChartSection.tsx

@@ -1,5 +1,5 @@
 import { Grid, Typography, Box } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 
 import TeamPie from 'components/index/helpers/chart/TeamPie'

src/components/index/sections/TeamSection.tsx

@@ -1,5 +1,5 @@
 import { Grid, Typography } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles((theme) =>

src/components/layout/Layout.tsx

@@ -1,5 +1,6 @@
 import Head from 'next/head'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'next-i18next'
 import {
   Box,
   Container,
@@ -49,12 +50,15 @@ export default function Layout({
   ...containerProps
 }: LayoutProps) {
   const classes = useStyles()
+  const { t } = useTranslation()
   const [mobileOpen, setMobileOpen] = useState(false)
   const navMenuToggle = () => setMobileOpen(!mobileOpen)
+  const suffix = t('meta.title')
+  const metaTitle = useMemo(() => (title ? `${title} | ${suffix}` : suffix), [title, suffix])
   return (
     <Container className={classes.layout} maxWidth={maxWidth} {...containerProps}>
       <Head>
-        <title>{title}</title>
+        <title>{metaTitle}</title>
       </Head>
       <Box pt={4} pb={10}>
         <AppNavBar navMenuToggle={navMenuToggle} />

src/components/layout/LocaleButton.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { useRouter } from 'next/router'
 import { Button } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 export default function LocaleMenu() {
   const router = useRouter()

src/components/layout/LocaleMenu.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Button, Menu, MenuItem } from '@material-ui/core'
 
 export default function LocaleMenu() {

src/components/layout/LocaleSwitcher.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import { useRouter } from 'next/router'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 import { Box, Button, ButtonGroup } from '@material-ui/core'
 
 export default function LocaleSwitcher() {

src/components/layout/nav/MainNavMenu.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Grid } from '@material-ui/core'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from 'next-i18next'
 
 import { routes } from 'common/routes'
 import LinkButton from 'components/common/LinkButton'