arbret/frontend/app/components/IntlProvider.tsx
counterweight f7553df05d
Phase 1: Infrastructure setup - Install next-intl and create basic i18n structure
- Install next-intl package
- Create LanguageProvider hook with localStorage persistence
- Create IntlProvider component for next-intl integration
- Create Providers wrapper component
- Update layout.tsx to include providers and set default lang to 'es'
- Create initial translation files (common.json) for es, en, ca
- Fix pre-existing TypeScript errors in various pages

All tests passing, build successful.
2025-12-25 21:50:34 +01:00

34 lines
856 B
TypeScript

"use client";
import { NextIntlClientProvider } from "next-intl";
import { ReactNode, useMemo } from "react";
import { useLanguage } from "../hooks/useLanguage";
// Import all locale messages
import esCommon from "../../locales/es/common.json";
import enCommon from "../../locales/en/common.json";
import caCommon from "../../locales/ca/common.json";
const messages = {
es: { common: esCommon },
en: { common: enCommon },
ca: { common: caCommon },
};
interface IntlProviderProps {
children: ReactNode;
}
export function IntlProvider({ children }: IntlProviderProps) {
const { locale } = useLanguage();
const localeMessages = useMemo(() => {
return messages[locale] || messages.es;
}, [locale]);
return (
<NextIntlClientProvider locale={locale} messages={localeMessages}>
{children}
</NextIntlClientProvider>
);
}