Merge pull request #429 from DTS-STN/serverSideTranslations-wrapper

refactor: next-i18next serverSideTranslations wrapper

src/lib/utils/next-i18next-utils.ts

@@ -0,0 +1,56 @@
+import { FlatNamespace } from 'i18next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+
+import nextI18nextConfig from '../../../next-i18next.config'
+
+/**
+ * The default namespaces for translations.
+ */
+export const defaultNamespaces: Array<FlatNamespace> = ['common']
+
+/**
+ * Retrieves namespaces based on the provided requirements.
+ * Note: The namespace from {@link defaultNamespaces} will always be added.
+ * @param namespacesRequired The namespaces required.
+ * @returns The retrieved namespaces.
+ */
+export const getNamespaces = (
+  namespacesRequired:
+    | Readonly<FlatNamespace>
+    | ReadonlyArray<FlatNamespace>
+    | undefined = undefined
+) => {
+  // default with namespaces to always needed
+  const namespaces: Array<FlatNamespace> = defaultNamespaces
+
+  if (!namespacesRequired) {
+    return namespaces
+  }
+
+  if (typeof namespacesRequired === 'string') {
+    return [...new Set([...namespaces, namespacesRequired])]
+  }
+
+  namespacesRequired
+  return [...new Set([...namespaces, ...namespacesRequired])]
+}
+
+/**
+ * A wrapper function for server-side translations using next-i18next.
+ * @param locale - The locale to use for translations. If not provided, the default locale specified in `nextI18nextConfig` will be used.
+ * @param namespacesRequired - The namespaces required for translations. It can be a single `FlatNamespace` or an array of `FlatNamespace`. If not provided, {@link defaultNamespaces} will be used.
+ * @returns {Promise<object>} - A Promise that resolves to an object containing the translations for the specified locale and namespaces.
+ */
+export const pageWithServerSideTranslations = async (
+  locale?: string,
+  namespacesRequired:
+    | FlatNamespace
+    | Array<FlatNamespace>
+    | undefined = undefined
+) => {
+  return serverSideTranslations(
+    locale ?? nextI18nextConfig.i18n.defaultLocale,
+    getNamespaces(namespacesRequired),
+    nextI18nextConfig
+  )
+}

src/pages/email.tsx

@@ -10,7 +10,6 @@ import {
 import { useFormik, validateYupSchema, yupToFormErrors } from 'formik'
 import { GetServerSideProps } from 'next'
 import { Trans, useTranslation } from 'next-i18next'
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
 import * as Yup from 'yup'
@@ -32,6 +31,7 @@ import Layout from '../components/Layout'
 import Modal from '../components/Modal'
 import { EmailEsrfApiRequestBody } from '../lib/types'
 import useEmailEsrf from '../lib/useEmailEsrf'
+import { pageWithServerSideTranslations } from '../lib/utils/next-i18next-utils'
 import { getDCTermsTitle } from '../lib/utils/seo-utils'
 
 const initialValues: EmailEsrfApiRequestBody = {
@@ -330,7 +330,7 @@ const Email: FC = () => {
 
 export const getServerSideProps: GetServerSideProps = async ({ locale }) => ({
   props: {
-    ...(await serverSideTranslations(locale ?? 'default', ['common', 'email'])),
+    ...(await pageWithServerSideTranslations(locale, 'email')),
   },
 })
 

src/pages/expectations.tsx

@@ -3,14 +3,14 @@ import { FC, MouseEventHandler, useCallback } from 'react'
 import { setCookie } from 'cookies-next'
 import { GetServerSideProps } from 'next'
 import { Trans, useTranslation } from 'next-i18next'
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { NextSeo } from 'next-seo'
 import Router from 'next/router'
 
 import ActionButton from '../components/ActionButton'
 import AlertSection from '../components/AlertSection'
 import ExternalLink from '../components/ExternalLink'
 import Layout from '../components/Layout'
+import { pageWithServerSideTranslations } from '../lib/utils/next-i18next-utils'
 import { getDCTermsTitle } from '../lib/utils/seo-utils'
 
 const Expectations: FC = () => {
@@ -113,10 +113,10 @@ const Expectations: FC = () => {
 
 export const getServerSideProps: GetServerSideProps = async ({ locale }) => ({
   props: {
-    ...(await serverSideTranslations(locale ?? 'default', [
-      'common',
-      'expectations',
-    ])),
+    ...(await pageWithServerSideTranslations(
+      locale ?? 'default',
+      'expectations'
+    )),
   },
 })
 

src/pages/landing.tsx

@@ -2,14 +2,14 @@ import { FC } from 'react'
 
 import { GetServerSideProps } from 'next'
 import { Trans, useTranslation } from 'next-i18next'
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { NextSeo } from 'next-seo'
 import Link from 'next/link'
 
 import Collapse from '../components/Collapse'
 import ExampleImage from '../components/ExampleImage'
 import Layout from '../components/Layout'
 import LinkButton from '../components/LinkButton'
+import { pageWithServerSideTranslations } from '../lib/utils/next-i18next-utils'
 import { getDCTermsTitle } from '../lib/utils/seo-utils'
 
 const Landing: FC = () => {
@@ -126,10 +126,7 @@ const Landing: FC = () => {
 
 export const getServerSideProps: GetServerSideProps = async ({ locale }) => ({
   props: {
-    ...(await serverSideTranslations(locale ?? 'default', [
-      'common',
-      'landing',
-    ])),
+    ...(await pageWithServerSideTranslations(locale, 'landing')),
   },
 })
 

src/pages/status.tsx

@@ -11,7 +11,6 @@ import {
 import { useFormik, validateYupSchema, yupToFormErrors } from 'formik'
 import { GetServerSideProps } from 'next'
 import { Trans, useTranslation } from 'next-i18next'
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { NextSeo } from 'next-seo'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -34,6 +33,7 @@ import Layout from '../components/Layout'
 import Modal from '../components/Modal'
 import { CheckStatusApiRequestQuery } from '../lib/types'
 import { useCheckStatus } from '../lib/useCheckStatus'
+import { pageWithServerSideTranslations } from '../lib/utils/next-i18next-utils'
 import { getDCTermsTitle } from '../lib/utils/seo-utils'
 
 const initialValues: CheckStatusApiRequestQuery = {
@@ -311,10 +311,7 @@ const Status: FC = () => {
 
 export const getServerSideProps: GetServerSideProps = async ({ locale }) => ({
   props: {
-    ...(await serverSideTranslations(locale ?? 'default', [
-      'common',
-      'status',
-    ])),
+    ...(await pageWithServerSideTranslations(locale, 'status')),
   },
 })