React Dictionary
The @codedazur/react-dictionary package provides a flexible solution for managing translations in your application. This guide will walk you through a basic integration for a Next.js project using the App Router.
For more advanced features, such as remote dictionaries or type-safety through module augmentation, please refer to the package documentation .
Creating a DictionaryProvider
First, create a DictionaryProvider component in your project. This will be a client component that wraps the provider from the package and configures it with your local dictionaries.
"use client";
import { DictionaryProvider as BaseDictionaryProvider } from "@codedazur/react-dictionary";
import { ReactNode } from "react";
const dictionaries = {
"en-US": {
close: "Close",
// ... other keys
},
"nl-NL": {
close: "Sluiten",
// ... other keys
},
};
export function DictionaryProvider({
children,
locale,
}: {
children: ReactNode;
locale: string;
}) {
return (
<BaseDictionaryProvider dictionaries={dictionaries} locale={locale}>
{children}
</BaseDictionaryProvider>
);
}Updating the Root Layout
Next, update your root layout to use the DictionaryProvider. This will make the dictionary available to all components in your application. You can extract the locale from the URL parameters.
import { DictionaryProvider } from "@/components/DictionaryProvider";
import { ReactNode } from "react";
export default function RootLayout({
children,
params,
}: {
children: ReactNode;
params: { locale: string };
}) {
return (
<html lang={params.locale}>
<body>
<DictionaryProvider locale={params.locale}>
{children}
</DictionaryProvider>
</body>
</html>
);
}Expected Keys
Fusion components expect the following keys to be present in your dictionaries to ensure that all UI elements are properly translated.
closecontinuefirstlastmenumutenextpauseplaypreviousunmute