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

i10n using NextIntl

Browse Source
This commit is contained in:
Dobromir Popov
2024-04-28 22:56:41 +03:00
parent 46df4b6066
commit 6d2885de59
12 changed files with 304 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
pages/_app.tsx
View File

@ -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
// }
// };
// }