i10n using NextIntl

pages/_app.tsx

@@ -6,7 +6,10 @@ import "tailwindcss/tailwind.css"
 
 import type { AppProps } from "next/app";
 import type { Session } from "next-auth";
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
+import { useRouter } from "next/router";
+import { NextIntlClientProvider } from 'next-intl';
+
 // for fontawesome
 import Head from 'next/head';
 import { LocalizationProvider } from '@mui/x-date-pickers';
@@ -22,10 +25,32 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 // }
 
 
-export default function App({
-  Component,
-  pageProps: { session, ...pageProps },
-}: AppProps<{ session: Session }>) {
+export default function App({ Component, pageProps: { session, ...pageProps }, }: AppProps<{ session: Session }>) {
+  console.log(pageProps);
+  const router = useRouter();
+  const [messages, setMessages] = useState({});
+
+  useEffect(() => {
+    console.log("Current locale:", router.locale);
+    async function loadLocaleData() {
+      const localeMessages = await import(`../content/i18n/${router.locale}.json`);
+      console.log("Loaded locale '", router.locale, "' ",);
+      //console.log("Loaded messages for locale:", router.locale, localeMessages.default);
+      setMessages(localeMessages.default);
+    }
+    loadLocaleData();
+  }, [router.locale]);
+
+  // useEffect(() => {
+  //   async function loadLocaleData() {
+  //     const locale = router.locale || 'en';
+  //     const messages = await fetch(`/api/translations/${locale}`).then(res => res.json());
+  //     setMessages(messages);
+  //   }
+
+  //   loadLocaleData();
+  // }, [router.locale]);
+
 
   useEffect(() => {
     const use = async () => {
@@ -67,11 +92,32 @@ export default function App({
 
   return (
     <>
-      <SessionProvider session={session} >
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <Component {...pageProps} />
-        </LocalizationProvider>
-      </SessionProvider>
+      <NextIntlClientProvider
+        locale={router.locale}
+        timeZone="Europe/Sofia"
+        messages={messages}
+      >
+        <SessionProvider session={session} >
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <Component {...pageProps} />
+          </LocalizationProvider>
+        </SessionProvider>
+      </NextIntlClientProvider>
     </>
   )
 }
+
+// build time localization. Is it working for _app.tsx?d
+// export async function getStaticProps(context) {
+//   const messages = (await import(`../content/i18n/${locale}.json`)).default;
+//   console.log("Loaded messages for locale:", locale, messages);
+//   return {
+//     props: {
+//       // You can get the messages from anywhere you like. The recommended
+//       // pattern is to put them in JSON files separated by locale and read
+//       // the desired one based on the `locale` received from Next.js.
+//       // messages: (await import(`../content/i18n/${context.locale}.json`)).default
+//       messages
+//     }
+//   };
+// }

pages/api/translations/[...locale].ts

@@ -0,0 +1,37 @@
+import fs from 'fs';
+import path from 'path';
+import { NextApiRequest, NextApiResponse } from 'next';
+type Translations = {
+    [key: string]: string;
+};
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    const { locale } = req.query;
+
+    const filePath = path.join(process.cwd(), `content/i18n/${locale}.json`);
+    const translations: Translations = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+
+    switch (req.method) {
+        case 'GET':
+            try {
+                res.status(200).json(translations);
+            } catch (error) {
+                console.error('Error reading translation file:', error);
+                res.status(500).json({ error: 'Failed to read translation file' });
+            }
+            break;
+
+        case 'POST': try {
+            const newTranslations = req.body;
+            fs.writeFileSync(filePath, JSON.stringify(newTranslations, null, 2), 'utf8');
+            res.status(200).json({ status: 'Updated' });
+        } catch (error) {
+            console.error('Error writing translation file:', error);
+            res.status(500).json({ error: 'Failed to update translation file' });
+        }
+            break;
+
+        default:
+            res.setHeader('Allow', ['GET', 'POST']);
+            res.status(405).end(`Method ${req.method} Not Allowed`);
+    }
+}

pages/dash.tsx

@@ -204,6 +204,7 @@ export const getServerSideProps = async (context) => {
         props: {
             initialItems: items,
             userId: session?.user.id,
+            // messages: (await import(`../content/i18n/${context.locale}.json`)).default
         },
     };
 }