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 path = require('path')
const nextTranslate = require('next-translate')
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
module.exports = { const nextConfig = {
reactStrictMode: true, reactStrictMode: true,
swcMinify: true, swcMinify: true,
sassOptions: { 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 type { AppProps } from 'next/app'
import useTranslation from 'next-translate/useTranslation'
import Cookies from 'js-cookie'
import '../styles/main.scss' import '../styles/main.scss'
const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => { 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} /> return <Component {...pageProps} />
} }

19
pages/index.tsx
View File

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