Walidoux/next-app-boilerplate
Walidoux/next-app-boilerplate
Template
1
1
Fork 0
Code Issues Pull Requests Actions Releases Activity

feat: implement next-translation

Browse Source
This commit is contained in:
Walid 2022-05-16 13:25:01 +01:00
parent c04f0ebd36
commit ede9e5e085
No known key found for this signature in database
GPG Key ID: 7DF9215FC4E48853
8 changed files with 46 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
i18n.json Normal file
View File

@ -0,0 +1,5 @@
{
"defaultLocale": "en",
"locales": ["fr", "en"],
"pages": { "*": ["common"], "/": ["home"] }
}

3
locales/en/common.json Normal file
View File

@ -0,0 +1,3 @@
{
"walidoux-github": "Walidoux's Github"
}

4
locales/en/home.json Normal file
View File

@ -0,0 +1,4 @@
{
"title": "You feel a calming tranquility...",
"subtitle": "You're filled with determination."
}

3
locales/fr/common.json Normal file
View File

@ -0,0 +1,3 @@
{
"walidoux-github": "Github de Walidoux"
}

4
locales/fr/home.json Normal file
View File

@ -0,0 +1,4 @@
{
"title": "Vous ressentez une tranquillité apaisante...",
"subtitle": "Vous êtes rempli de détermination."
}

8
next.config.js
View File

@ -1,9 +1,9 @@
// @ts-check
const path = require('path')
const nextTranslate = require('next-translate')
/** @type {import('next').NextConfig} */
module.exports = {
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
sassOptions: {
@ -13,3 +13,5 @@ module.exports = {
]
}
}
module.exports = nextTranslate(nextConfig)

12
pages/_app.tsx
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} />
}

19
pages/index.tsx
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>