popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dobromir Popov
2024-04-30 20:22:10 +03:00
parent e3d75180d7
commit 176c14a8e0
3 changed files with 48 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
pages/_app.tsx
View File

@ -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 }>) {
// console.log(pageProps);
const router = useRouter();
const [locale, setLocale] = useState(router.locale || 'bg');
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]);
//function SmwsApp({ Component, pageProps: { locale, messages, session, ...pageProps }, }: AppProps<{ session: Session }>) {
function SmwsApp({ Component, pageProps, session, locale, messages }) {
// dynamic locale loading using our API endpoint
// const [locale, setLocale] = useState(router.locale || 'bg');
// const [messages, setMessages] = useState({});
// useEffect(() => {
// async function loadLocaleData() {
// const locale = router.locale || 'en';
// const messages = await fetch(`/api/translations/${locale}`).then(res => res.json());
// setMessages(messages);
// 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("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
export async function getStaticProps(context) {
const messages = (await import(`../content/i18n/${context.locale}.json`)).default;
console.log("Loaded messages for locale:", context.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
}
};
async function loadLocaleData(locale) {
try {
const messages = await import(`../content/i18n/${locale}.json`);
return messages.default;
} catch (e) {
console.warn("Could not load locale data for:", locale);
return {};
}
}
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;