feat: implement next-translation

This commit is contained in:
2022-05-16 13:25:01 +01:00
parent c04f0ebd36
commit ede9e5e085
8 changed files with 46 additions and 12 deletions

View File

@ -1,8 +1,20 @@
import { useEffect } from 'react'
import type { AppProps } from 'next/app'
import useTranslation from 'next-translate/useTranslation'
import Cookies from 'js-cookie'
import '../styles/main.scss'
const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
const { lang } = useTranslation()
// 10 years before cookie's expiration
const COOKIE_EXPIRATION = 10 * 365.25 * 24 * 60 * 60
useEffect(() => {
Cookies.set('NEXT_LOCALE', lang, { expires: COOKIE_EXPIRATION })
}, [lang, COOKIE_EXPIRATION])
return <Component {...pageProps} />
}

View File

@ -1,26 +1,27 @@
import type { NextPage } from 'next'
import { GitHub } from 'react-feather'
import { FiGithub } from 'react-icons/fi'
import Link from 'next/link'
import useTranslation from 'next-translate/useTranslation'
import Head from 'components/Head/NextHead'
import NextHead from 'components/NextHead'
import styles from '../styles/pages/home.module.scss'
const Home: NextPage = () => {
const { t } = useTranslation()
return (
<main className={styles.application}>
<Head />
<NextHead />
<p className={styles.title}>
You feel a calming tranquility... <br />
<span className={styles.subtitle}>
You&apos;re filled with determination.
</span>
{t('home:title')} <br />
<span className={styles.subtitle}>{t('home:subtitle')}</span>
</p>
<Link href='https://github.com/Walidoux'>
<a className={styles['redirect-link']} target='_blank'>
<GitHub />
<span className={styles.text}>Walidoux&apos;s Github</span>
<FiGithub fontSize={20} />
<span className={styles.text}>{t('common:walidoux-github')}</span>
</a>
</Link>
</main>