From 2bae7c43764df5678fe2fc2e68be11ae95d85a41 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 28 Jan 2022 16:21:47 +0100 Subject: fix: handle translation with lingui The previous method was not working so I tried a different approach. Translation is loaded but I'm still getting warnings: * Plurals for locale undefined aren't loaded * Text content did not match I can't figure how to fix them... --- src/pages/404.tsx | 10 ++++------ src/pages/_app.tsx | 28 ++++++++-------------------- src/pages/article/[slug].tsx | 9 ++++----- src/pages/blog/index.tsx | 17 +++++++++-------- src/pages/contact.tsx | 10 ++++------ src/pages/cv.tsx | 9 ++++----- src/pages/index.tsx | 15 ++++++++------- src/pages/mentions-legales.tsx | 9 ++++----- src/pages/projet/[slug].tsx | 9 ++++----- src/pages/projets.tsx | 9 ++++----- src/pages/recherche/index.tsx | 17 ++++++++--------- src/pages/sujet/[slug].tsx | 9 ++++----- src/pages/thematique/[slug].tsx | 9 ++++----- 13 files changed, 69 insertions(+), 91 deletions(-) (limited to 'src/pages') diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 2c20578..5ba7b95 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -3,7 +3,7 @@ import PostHeader from '@components/PostHeader/PostHeader'; import { seo } from '@config/seo'; import { t, Trans } from '@lingui/macro'; import { NextPageWithLayout } from '@ts/types/app'; -import { loadTranslation } from '@utils/helpers/i18n'; +import { defaultLocale, loadTranslation } from '@utils/helpers/i18n'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; import Link from 'next/link'; @@ -38,16 +38,14 @@ error404.getLayout = getLayout; export const getStaticProps: GetStaticProps = async ( context: GetStaticPropsContext ) => { - const translation = await loadTranslation( - context.locale!, - process.env.NODE_ENV === 'production' - ); - const breadcrumbTitle = t`Error`; + const { locale } = context; + const translation = await loadTranslation(locale || defaultLocale); return { props: { breadcrumbTitle, + locale, translation, }, }; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index a22c616..db021f9 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,31 +1,19 @@ -import { useEffect, useRef } from 'react'; -import { useRouter } from 'next/router'; +import { useEffect } from 'react'; import { i18n } from '@lingui/core'; import { I18nProvider } from '@lingui/react'; import { AppPropsWithLayout } from '@ts/types/app'; -import { initTranslation } from '@utils/helpers/i18n'; +import { activateLocale, defaultLocale, initLingui } from '@utils/helpers/i18n'; import '../styles/globals.scss'; import { ThemeProvider } from 'next-themes'; -initTranslation(i18n); +initLingui(defaultLocale); -function MyApp({ Component, pageProps }: AppPropsWithLayout) { - const router = useRouter(); - const locale: string = router.locale || router.defaultLocale!; - const firstRender = useRef(true); - - if (pageProps.translation && firstRender.current) { - i18n.load(locale, pageProps.translation); - i18n.activate(locale); - firstRender.current = false; - } +const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => { + const locale: string = pageProps.locale || defaultLocale; useEffect(() => { - if (pageProps.translation) { - i18n.load(locale, pageProps.translation); - i18n.activate(locale); - } - }, [locale, pageProps.translation]); + activateLocale(locale, pageProps.translation); + }); const getLayout = Component.getLayout ?? ((page) => page); return ( @@ -39,6 +27,6 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { ); -} +}; export default MyApp; diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx index c9aedb8..d38ff63 100644 --- a/src/pages/article/[slug].tsx +++ b/src/pages/article/[slug].tsx @@ -7,7 +7,7 @@ import { config } from '@config/website'; import { getAllPostsSlug, getPostBySlug } from '@services/graphql/queries'; import { NextPageWithLayout } from '@ts/types/app'; import { ArticleMeta, ArticleProps } from '@ts/types/articles'; -import { loadTranslation } from '@utils/helpers/i18n'; +import { defaultLocale, loadTranslation } from '@utils/helpers/i18n'; import { addPrismClasses, translateCopyButton } from '@utils/helpers/prism'; import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; @@ -162,10 +162,8 @@ interface PostParams extends ParsedUrlQuery { export const getStaticProps: GetStaticProps = async ( context: GetStaticPropsContext ) => { - const translation = await loadTranslation( - context.locale!, - process.env.NODE_ENV === 'production' - ); + const { locale } = context; + const translation = await loadTranslation(locale || defaultLocale); const { slug } = context.params as PostParams; const post = await getPostBySlug(slug); const breadcrumbTitle = post.title; @@ -173,6 +171,7 @@ export const getStaticProps: GetStaticProps = async ( return { props: { breadcrumbTitle, + locale, post, translation, }, diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index e0d1485..0650cfb 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -1,4 +1,4 @@ -import { GetStaticProps } from 'next'; +import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; import { t } from '@lingui/macro'; import { getLayout } from '@components/Layouts/Layout'; @@ -6,7 +6,7 @@ import { seo } from '@config/seo'; import { config } from '@config/website'; import { NextPageWithLayout } from '@ts/types/app'; import { BlogPageProps, PostsList as PostsListData } from '@ts/types/blog'; -import { loadTranslation } from '@utils/helpers/i18n'; +import { defaultLocale, loadTranslation } from '@utils/helpers/i18n'; import PostsList from '@components/PostsList/PostsList'; import useSWRInfinite from 'swr/infinite'; import { Button } from '@components/Buttons'; @@ -161,13 +161,13 @@ const Blog: NextPageWithLayout = ({ fallback }) => { Blog.getLayout = getLayout; -export const getStaticProps: GetStaticProps = async (context) => { - const translation = await loadTranslation( - context.locale!, - process.env.NODE_ENV === 'production' - ); - const data = await getPublishedPosts({ first: config.postsPerPage }); +export const getStaticProps: GetStaticProps = async ( + context: GetStaticPropsContext +) => { const breadcrumbTitle = t`Blog`; + const data = await getPublishedPosts({ first: config.postsPerPage }); + const { locale } = context; + const translation = await loadTranslation(locale || defaultLocale); return { props: { @@ -175,6 +175,7 @@ export const getStaticProps: GetStaticProps = async (context) => { fallback: { '/api/posts': data, }, + locale, translation, }, }; diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx index 66f4f9e..cb88b7d 100644 --- a/src/pages/contact.tsx +++ b/src/pages/contact.tsx @@ -5,7 +5,7 @@ import { seo } from '@config/seo'; import { t } from '@lingui/macro'; import { sendMail } from '@services/graphql/mutations'; import { NextPageWithLayout } from '@ts/types/app'; -import { loadTranslation } from '@utils/helpers/i18n'; +import { defaultLocale, loadTranslation } from '@utils/helpers/i18n'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; import { FormEvent, useState } from 'react'; @@ -176,16 +176,14 @@ ContactPage.getLayout = getLayout; export const getStaticProps: GetStaticProps = async ( context: GetStaticPropsContext ) => { - const translation = await loadTranslation( - context.locale!, - process.env.NODE_ENV === 'production' - ); - const breadcrumbTitle = t`Contact`; + const { locale } = context; + const translation = await loadTranslation(locale || defaultLocale); return { props: { breadcrumbTitle, + locale, translation, }, }; diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx index 47093c4..85bddd6 100644 --- a/src/pages/cv.tsx +++ b/src/pages/cv.tsx @@ -1,7 +1,6 @@ import { getLayout } from '@components/Layouts/Layout'; import { seo } from '@config/seo'; import { NextPageWithLayout } from '@ts/types/app'; -import { loadTranslation } from '@utils/helpers/i18n'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; import CVContent, { intro, meta, pdf, image } from '@content/pages/cv.mdx'; @@ -14,6 +13,7 @@ import Sidebar from '@components/Sidebar/Sidebar'; import { AboutPage, Graph, WebPage } from 'schema-dts'; import { config } from '@config/website'; import { useRouter } from 'next/router'; +import { defaultLocale, loadTranslation } from '@utils/helpers/i18n'; const CV: NextPageWithLayout = () => { const router = useRouter(); @@ -111,15 +111,14 @@ CV.getLayout = getLayout; export const getStaticProps: GetStaticProps = async ( context: GetStaticPropsContext ) => { - const translation = await loadTranslation( - context.locale!, - process.env.NODE_ENV === 'production' - ); const breadcrumbTitle = meta.title; + const { locale } = context; + const translation = await loadTranslation(locale || defaultLocale); return { props: { breadcrumbTitle, + locale, translation, }, }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index bc89334..ae5fe4b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,10 +1,10 @@ import type { ReactElement } from 'react'; -import { GetStaticProps } from 'next'; +import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; import Layout from '@components/Layouts/Layout'; import { seo } from '@config/seo'; import { NextPageWithLayout } from '@ts/types/app'; -import { loadTranslation } from '@utils/helpers/i18n'; +import { defaultLocale, loadTranslation } from '@utils/helpers/i18n'; import HomePageContent from '@content/pages/homepage.mdx'; import { ButtonLink } from '@components/Buttons'; import styles from '@styles/pages/Home.module.scss'; @@ -137,14 +137,15 @@ Home.getLayout = function getLayout(page: ReactElement) { return {page}; }; -export const getStaticProps: GetStaticProps = async (ctx) => { - const translation = await loadTranslation( - ctx.locale!, - process.env.NODE_ENV === 'production' - ); +export const getStaticProps: GetStaticProps = async ( + context: GetStaticPropsContext +) => { + const { locale } = context; + const translation = await loadTranslation(locale || defaultLocale); return { props: { + locale, translation, }, }; diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx index ac587f0..c9d2ccd 100644 --- a/src/pages/mentions-legales.tsx +++ b/src/pages/mentions-legales.tsx @@ -1,7 +1,7 @@ import { getLayout } from '@components/Layouts/Layout'; import { seo } from '@config/seo'; import { NextPageWithLayout } from '@ts/types/app'; -import { loadTranslation } from '@utils/helpers/i18n'; +import { defaultLocale, loadTranslation } from '@utils/helpers/i18n'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; import LegalNoticeContent, { @@ -105,15 +105,14 @@ LegalNotice.getLayout = getLayout; export const getStaticProps: GetStaticProps = async ( context: GetStaticPropsContext ) => { - const translation = await loadTranslation( - context.locale!, - process.env.NODE_ENV === 'production' - ); const breadcrumbTitle = meta.title; + const { locale } = context; + const translation = await loadTranslation(locale || defaultLocale); return { props: { breadcrumbTitle, + locale, translation, }, }; diff --git a/src/pages/projet/[slug].tsx b/src/pages/projet/[slug].tsx index b6a9cf2..847f84c 100644 --- a/src/pages/projet/[slug].tsx +++ b/src/pages/projet/[slug].tsx @@ -11,7 +11,7 @@ import { Project as ProjectData, ProjectProps, } from '@ts/types/app'; -import { loadTranslation } from '@utils/helpers/i18n'; +import { defaultLocale, loadTranslation } from '@utils/helpers/i18n'; import { getAllProjectsFilename, getProjectData, @@ -131,17 +131,16 @@ interface ProjectParams extends ParsedUrlQuery { export const getStaticProps: GetStaticProps = async ( context: GetStaticPropsContext ) => { - const translation = await loadTranslation( - context.locale!, - process.env.NODE_ENV === 'production' - ); const breadcrumbTitle = ''; + const { locale } = context; + const translation = await loadTranslation(locale || defaultLocale); const { slug } = context.params as ProjectParams; const project = await getProjectData(slug); return { props: { breadcrumbTitle, + locale, project, translation, }, diff --git a/src/pages/projets.tsx b/src/pages/projets.tsx index 1a83326..4359721 100644 --- a/src/pages/projets.tsx +++ b/src/pages/projets.tsx @@ -6,7 +6,7 @@ import { config } from '@config/website'; import PageContent, { meta } from '@content/pages/projects.mdx'; import styles from '@styles/pages/Projects.module.scss'; import { Project } from '@ts/types/app'; -import { loadTranslation } from '@utils/helpers/i18n'; +import { defaultLocale, loadTranslation } from '@utils/helpers/i18n'; import { getSortedProjects } from '@utils/helpers/projects'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; @@ -89,16 +89,15 @@ Projects.getLayout = getLayout; export const getStaticProps: GetStaticProps = async ( context: GetStaticPropsContext ) => { - const translation = await loadTranslation( - context.locale!, - process.env.NODE_ENV === 'production' - ); const breadcrumbTitle = meta.title; + const { locale } = context; const projects: Project[] = await getSortedProjects(); + const translation = await loadTranslation(locale || defaultLocale); return { props: { breadcrumbTitle, + locale, projects, translation, }, diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx index f497ca3..7f410e8 100644 --- a/src/pages/recherche/index.tsx +++ b/src/pages/recherche/index.tsx @@ -7,8 +7,7 @@ import { t } from '@lingui/macro'; import { getPublishedPosts } from '@services/graphql/queries'; import { NextPageWithLayout } from '@ts/types/app'; import { PostsList as PostsListData } from '@ts/types/blog'; -import { loadTranslation } from '@utils/helpers/i18n'; -import { GetStaticProps } from 'next'; +import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { useEffect, useRef, useState } from 'react'; @@ -18,6 +17,7 @@ import { ThematicsList, TopicsList } from '@components/Widgets'; import styles from '@styles/pages/Page.module.scss'; import Spinner from '@components/Spinner/Spinner'; import PaginationCursor from '@components/PaginationCursor/PaginationCursor'; +import { defaultLocale, loadTranslation } from '@utils/helpers/i18n'; const Search: NextPageWithLayout = () => { const [query, setQuery] = useState(''); @@ -78,7 +78,6 @@ const Search: NextPageWithLayout = () => { const title = query ? t`Search results for: ${query}` : t({ - id: 'msg.search', comment: 'Search page title', message: 'Search', }); @@ -143,17 +142,17 @@ const Search: NextPageWithLayout = () => { Search.getLayout = getLayout; -export const getStaticProps: GetStaticProps = async (context) => { - const translation = await loadTranslation( - context.locale!, - process.env.NODE_ENV === 'production' - ); - +export const getStaticProps: GetStaticProps = async ( + context: GetStaticPropsContext +) => { const breadcrumbTitle = t`Search`; + const { locale } = context; + const translation = await loadTranslation(locale || defaultLocale); return { props: { breadcrumbTitle, + locale, translation, }, }; diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx index 028131b..9947758 100644 --- a/src/pages/sujet/[slug].tsx +++ b/src/pages/sujet/[slug].tsx @@ -3,7 +3,7 @@ import PostPreview from '@components/PostPreview/PostPreview'; import { t } from '@lingui/macro'; import { NextPageWithLayout } from '@ts/types/app'; import { TopicProps, ThematicPreview } from '@ts/types/taxonomies'; -import { loadTranslation } from '@utils/helpers/i18n'; +import { defaultLocale, loadTranslation } from '@utils/helpers/i18n'; import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next'; import { ParsedUrlQuery } from 'querystring'; import styles from '@styles/pages/Page.module.scss'; @@ -151,10 +151,8 @@ interface PostParams extends ParsedUrlQuery { export const getStaticProps: GetStaticProps = async ( context: GetStaticPropsContext ) => { - const translation = await loadTranslation( - context.locale!, - process.env.NODE_ENV === 'production' - ); + const { locale } = context; + const translation = await loadTranslation(locale || defaultLocale); const { slug } = context.params as PostParams; const topic = await getTopicBySlug(slug); const breadcrumbTitle = topic.title; @@ -162,6 +160,7 @@ export const getStaticProps: GetStaticProps = async ( return { props: { breadcrumbTitle, + locale, topic, translation, }, diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx index 75f33ff..9955089 100644 --- a/src/pages/thematique/[slug].tsx +++ b/src/pages/thematique/[slug].tsx @@ -3,7 +3,7 @@ import PostPreview from '@components/PostPreview/PostPreview'; import { t } from '@lingui/macro'; import { NextPageWithLayout } from '@ts/types/app'; import { TopicPreview, ThematicProps } from '@ts/types/taxonomies'; -import { loadTranslation } from '@utils/helpers/i18n'; +import { defaultLocale, loadTranslation } from '@utils/helpers/i18n'; import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next'; import { ParsedUrlQuery } from 'querystring'; import styles from '@styles/pages/Page.module.scss'; @@ -141,10 +141,8 @@ interface PostParams extends ParsedUrlQuery { export const getStaticProps: GetStaticProps = async ( context: GetStaticPropsContext ) => { - const translation = await loadTranslation( - context.locale!, - process.env.NODE_ENV === 'production' - ); + const { locale } = context; + const translation = await loadTranslation(locale || defaultLocale); const { slug } = context.params as PostParams; const thematic = await getThematicBySlug(slug); const breadcrumbTitle = thematic.title; @@ -152,6 +150,7 @@ export const getStaticProps: GetStaticProps = async ( return { props: { breadcrumbTitle, + locale, thematic, translation, }, -- cgit v1.2.3