feat: add i18n support for static texts in components and stuff (#862)

Co-authored-by: anemne <[email protected]>
varianter · Nov 6, 2024 · 823c524 · 823c524
1 parent 674ed36
commit 823c524
Show file tree

Hide file tree

Showing 15 changed files with 271 additions and 120 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -0,0 +1,7 @@
+{
+  "CustomerCase": {
+    "customer": "Customer",
+    "project": "Project",
+    "duration": "Duration"
+  }
+}
diff --git a/messages/no.json b/messages/no.json
@@ -0,0 +1,7 @@
+{
+  "CustomerCase": {
+    "customer": "Kunde",
+    "project": "Prosjekt",
+    "duration": "Varighet"
+  }
+}
diff --git a/messages/se.json b/messages/se.json
@@ -0,0 +1,7 @@
+{
+  "CustomerCase": {
+    "customer": "Kund",
+    "project": "Projekt",
+    "duration": "Varaktighet"
+  }
+}
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,3 +1,7 @@
+import createNextIntlPlugin from "next-intl/plugin";
+
+const withNextIntl = createNextIntlPlugin();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
@@ -17,4 +21,4 @@ const nextConfig = {
   },
 };
 
-export default nextConfig;
+export default withNextIntl(nextConfig);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@sanity/vision": "^3.39.1",
     "negotiator": "^0.6.3",
     "next": "^14.2.15",
+    "next-intl": "^3.24.0",
     "next-sanity": "^7.1.4",
     "next-sanity-image": "^6.1.1",
     "react": "^18.3.1",

diff --git a/src/app/(main)/[lang]/[...path]/page.tsx → src/app/(main)/[locale]/[...path]/page.tsx b/src/app/(main)/[lang]/[...path]/page.tsx → src/app/(main)/[locale]/[...path]/page.tsx
@@ -25,7 +25,7 @@ import {
 export const dynamic = "force-dynamic";
 
 type Props = {
-  params: { lang: string; path: string[] };
+  params: { locale: string; path: string[] };
 };
 
 function seoDataFromPageData(
@@ -52,7 +52,7 @@ function seoDataFromPageData(
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { perspective } = getDraftModeInfo();
-  const language = params.lang;
+  const language = params.locale;
   const pageData = await fetchPageDataFromParams({
     language,
     path: params.path,
@@ -71,12 +71,12 @@ const Page404 = (
 );
 
 async function Page({ params }: Props) {
-  const { lang, path } = params;
+  const { locale, path } = params;
 
   const { perspective, isDraftMode } = getDraftModeInfo();
 
   const pageData = await fetchPageDataFromParams({
-    language: lang,
+    language: locale,
     path,
     perspective: perspective ?? "published",
     hostname: headers().get("host"),
@@ -91,7 +91,7 @@ async function Page({ params }: Props) {
   return (
     <>
       <PageHeader
-        language={lang}
+        language={locale}
         pathTitles={pathTitles}
         pathTranslations={pathTranslations}
         showBreadcrumbs={true}
@@ -105,7 +105,7 @@ async function Page({ params }: Props) {
                   {queryResponse.data?.sections?.map((section, index) => (
                     <SectionRenderer
                       key={section._key}
-                      language={lang}
+                      language={locale}
                       section={section}
                       isDraftMode={isDraftMode}
                       initialData={queryResponse}

diff --git a/src/app/(main)/[lang]/layout.tsx → src/app/(main)/[locale]/layout.tsx b/src/app/(main)/[lang]/layout.tsx → src/app/(main)/[locale]/layout.tsx
@@ -1,9 +1,13 @@
 import localFont from "next/font/local";
 import { draftMode } from "next/headers";
+import { notFound } from "next/navigation";
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages } from "next-intl/server";
 
 import Footer from "src/components/navigation/footer/Footer";
 import FooterPreview from "src/components/navigation/footer/FooterPreview";
 import SkipToMain from "src/components/skipToMain/SkipToMain";
+import { Locale, routing } from "src/i18n/routing";
 import { getDraftModeInfo } from "src/utils/draftmode";
 import { BrandAssets } from "studio/lib/interfaces/brandAssets";
 import { CompanyInfo } from "studio/lib/interfaces/companyDetails";
@@ -21,7 +25,6 @@ import {
   SOME_PROFILES_QUERY,
 } from "studio/lib/queries/siteSettings";
 import { loadStudioQuery } from "studio/lib/store";
-
 import "src/styles/global.css";
 
 const fontBrittiSans = localFont({
@@ -37,9 +40,15 @@ export default async function Layout({
 }: Readonly<{
   children: React.ReactNode;
   params: {
-    lang: string;
+    locale: string;
   };
 }>) {
+  if (!routing.locales.includes(params.locale as Locale)) {
+    notFound();
+  }
+
+  const messages = await getMessages();
+
   const { perspective, isDraftMode } = getDraftModeInfo();
 
   const [
@@ -51,7 +60,7 @@ export default async function Layout({
   ] = await Promise.all([
     loadStudioQuery<Navigation>(
       NAV_QUERY,
-      { language: params.lang },
+      { language: params.locale },
       { perspective },
     ),
     loadStudioQuery<CompanyInfo>(COMPANY_INFO_QUERY, {}, { perspective }),
@@ -62,7 +71,7 @@ export default async function Layout({
     ),
     loadStudioQuery<LegalDocument[]>(
       LEGAL_DOCUMENTS_BY_LANG_QUERY,
-      { language: params.lang },
+      { language: params.locale },
       { perspective },
     ),
     loadStudioQuery<BrandAssets>(BRAND_ASSETS_QUERY, {}, { perspective }),
@@ -73,29 +82,31 @@ export default async function Layout({
   const hasFooterData = hasNavData && initialNav.data.footer;
 
   return (
-    <html lang={params.lang}>
+    <html lang={params.locale}>
       <body className={fontBrittiSans.variable}>
-        <SkipToMain />
-        {children}
-        {hasFooterData && isDraftMode ? (
-          <FooterPreview
-            initialNav={initialNav}
-            initialCompanyInfo={initialCompanyInfo}
-            initialBrandAssets={initialBrandAssets}
-            initialSoMe={initialSoMe}
-            initialLegal={initialLegal}
-            language={params.lang}
-          />
-        ) : (
-          <Footer
-            navigationData={initialNav.data}
-            legalData={initialLegal.data}
-            companyInfo={initialCompanyInfo.data}
-            brandAssets={initialBrandAssets.data}
-            soMeData={initialSoMe.data}
-          />
-        )}
-        {draftMode().isEnabled && <LiveVisualEditing />}
+        <NextIntlClientProvider messages={messages}>
+          <SkipToMain />
+          {children}
+          {hasFooterData && isDraftMode ? (
+            <FooterPreview
+              initialNav={initialNav}
+              initialCompanyInfo={initialCompanyInfo}
+              initialBrandAssets={initialBrandAssets}
+              initialSoMe={initialSoMe}
+              initialLegal={initialLegal}
+              language={params.locale}
+            />
+          ) : (
+            <Footer
+              navigationData={initialNav.data}
+              legalData={initialLegal.data}
+              companyInfo={initialCompanyInfo.data}
+              brandAssets={initialBrandAssets.data}
+              soMeData={initialSoMe.data}
+            />
+          )}
+          {draftMode().isEnabled && <LiveVisualEditing />}
+        </NextIntlClientProvider>
       </body>
     </html>
   );

diff --git a/src/app/(main)/[lang]/page.tsx → src/app/(main)/[locale]/page.tsx b/src/app/(main)/[lang]/page.tsx → src/app/(main)/[locale]/page.tsx
@@ -20,10 +20,10 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { data: landingPage } = await loadStudioQuery<PageBuilder | null>(
     LANDING_PAGE_QUERY,
     {
-      language: params.lang,
+      language: params.locale,
     },
   );
-  return generateMetadataFromSeo(landingPage?.seo ?? null, params.lang);
+  return generateMetadataFromSeo(landingPage?.seo ?? null, params.locale);
 }
 
 const navigationManagerLink = {
@@ -35,15 +35,15 @@ const navigationManagerLink = {
 };
 
 type Props = {
-  params: { lang: string };
+  params: { locale: string };
 };
 
 const Home = async ({ params }: Props) => {
   const { perspective, isDraftMode } = getDraftModeInfo();
 
   const initialLandingPage = await loadStudioQuery<PageBuilder | null>(
     LANDING_PAGE_QUERY,
-    { language: params.lang },
+    { language: params.locale },
     { perspective },
   );
 
@@ -72,7 +72,7 @@ const Home = async ({ params }: Props) => {
   return (
     <>
       <PageHeader
-        language={params.lang}
+        language={params.locale}
         pathTranslations={pathTranslations}
         pathTitles={[]}
         showBreadcrumbs={false}
@@ -81,7 +81,7 @@ const Home = async ({ params }: Props) => {
         {initialLandingPage.data.sections.map((section, index) => (
           <SectionRenderer
             key={section._key}
-            language={params.lang}
+            language={params.locale}
             section={section}
             isDraftMode={isDraftMode}
             initialData={initialLandingPage}