fix i18n server side resource messages loading; setup loading language resources on the server

components/protectedRoute.tsx

@@ -18,7 +18,7 @@ const ProtectedRoute = ({ children, allowedRoles, deniedMessage, bypass = false,
     const router = useRouter();
 
     useEffect(() => {
-        console.log("session.role:" + session?.user?.role);
+        //console.log("session.role:" + session?.user?.role);
         if (!status || status === "unauthenticated") {
             // Redirect to the sign-in page
             if (autoRedirect) {

components/sidebar.tsx

@@ -1,12 +1,13 @@
 import { signIn, signOut, useSession } from "next-auth/react";
 import styles from "../styles/header.module.css";
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, use } from "react";
 import { useRouter } from 'next/router';
 import sidemenu, { footerMenu } from './sidemenuData.js'; // Move sidemenu data to a separate file
 import axiosInstance from "src/axiosSecure";
 import common from "src/helpers/common";
 import LanguageSwitcher from "./languageSwitcher";
 import { useTranslations } from 'next-intl';
+import { getTranslations } from 'next-intl/server';
 import ProtectedPage from "pages/examples/protected";
 import ProtectedRoute from "./protectedRoute";
 import { UserRole } from "@prisma/client";
@@ -15,7 +16,11 @@ const packageVersion = require('../package.json').version;
 
 function SidebarMenuItem({ item, session, isSubmenu }) {
   // const tMenu = useTranslations('menu');
-  const t = useTranslations('common');
+  // const [t, locale] = useState(useTranslations('menu'));
+  // useEffect(() => {
+  //   console.log("SidebarMenuItem locale: ", locale);
+  //   locale(useTranslations('common'));
+  // }, [locale]);
   const router = useRouter();
   const isActive = router.pathname.includes(item.url);
 

pages/_app.tsx

@@ -4,11 +4,13 @@ import "../styles/styles.css"
 import "../styles/global.css"
 import "tailwindcss/tailwind.css"
 
-import type { AppProps } from "next/app";
+import App, { AppContext, AppProps } from 'next/app';
 import type { Session } from "next-auth";
 import { useEffect, useState } from "react"
 import { useRouter } from "next/router";
 import { NextIntlClientProvider } from 'next-intl';
+import { getServerSession } from "next-auth/next";
+
 
 // for fontawesome
 import Head from 'next/head';
@@ -25,41 +27,25 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 // }
 
 
-export default function App({ Component, pageProps: { session, ...pageProps }, }: AppProps<{ session: Session }>) {
+//function SmwsApp({ Component, pageProps: { locale, messages, session, ...pageProps }, }: AppProps<{ session: Session }>) {
-  // console.log(pageProps);
+function SmwsApp({ Component, pageProps, session, locale, messages }) {
-  const router = useRouter();
+  // dynamic locale loading using our API endpoint
-  const [locale, setLocale] = useState(router.locale || 'bg');
+  // const [locale, setLocale] = useState(router.locale || 'bg');
-  const [messages, setMessages] = useState({});
+  // const [messages, setMessages] = useState({});
-
-  useEffect(() => {
-    console.log("Current locale:", router.locale);
-    async function loadLocaleData() {
-      // Replace the static import with a fetch request
-      const res = await fetch(`/api/translations/${locale}`);
-      if (res.ok) {
-        const localeMessages = await res.json();
-        console.log("Loaded messages for locale:", locale, localeMessages);
-        setMessages(localeMessages);
-      } else {
-        const localeMessages = await import(`../content/i18n/${locale}.json`); setMessages(localeMessages.default);
-      }
-      console.log("Loaded locale '", locale, "' ",);
-      //console.log("Loaded messages for locale:", router.locale, localeMessages.default);
-
-    }
-    loadLocaleData();
-  }, [locale]);
-
   // useEffect(() => {
   //   async function loadLocaleData() {
-  //     const locale = router.locale || 'en';
+  //     const res = await fetch(`/api/translations/${locale}`);
-  //     const messages = await fetch(`/api/translations/${locale}`).then(res => res.json());
+  //     if (res.ok) {
-  //     setMessages(messages);
+  //       const localeMessages = await res.json();
+  //       console.log("Loaded messages for locale:", locale, localeMessages);
+  //       setMessages(localeMessages);
+  //     } else {
+  //       const localeMessages = await import(`../content/i18n/${locale}.json`); setMessages(localeMessages.default);
+  //     }
+  //     console.log("locale set to'", locale, "' ",);
   //   }
-
   //   loadLocaleData();
-  // }, [router.locale]);
+  // }, [locale]);
-
 
   useEffect(() => {
     const use = async () => {
@@ -102,7 +88,7 @@ export default function App({ Component, pageProps: { session, ...pageProps }, }
   return (
     <>
       <NextIntlClientProvider
-        locale={'bg'}
+        locale={locale}
         timeZone="Europe/Sofia"
         messages={messages}
       >
@@ -116,17 +102,25 @@ export default function App({ Component, pageProps: { session, ...pageProps }, }
   )
 }
 
-// build time localization. Is it working for _app.tsx?d
+async function loadLocaleData(locale) {
-export async function getStaticProps(context) {
+  try {
-  const messages = (await import(`../content/i18n/${context.locale}.json`)).default;
+    const messages = await import(`../content/i18n/${locale}.json`);
-  console.log("Loaded messages for locale:", context.locale, messages);
+    return messages.default;
-  return {
+  } catch (e) {
-    props: {
+    console.warn("Could not load locale data for:", locale);
-      // You can get the messages from anywhere you like. The recommended
+    return {};
-      // 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
-    }
-  };
 }
+
+SmwsApp.getInitialProps = async (appContext: AppContext) => {
+  const appProps = await App.getInitialProps(appContext);
+  const locale = appContext.router.locale || 'bg';
+  const messages = await loadLocaleData(locale);
+
+  return {
+    ...appProps,
+    locale,
+    messages,
+  };
+};
+export default SmwsApp;