Documentation de l'Hook useIntlayer pour Next.js

L'hook useIntlayer est conçu pour les applications Next.js afin de récupérer et gérer efficacement le contenu localisé. Cette documentation se concentre sur l'utilisation de cet hook dans les projets Next.js, en garantissant des pratiques de localisation appropriées.

Importation de useIntlayer dans Next.js

Selon que vous travaillez sur des composants côté client ou côté serveur dans une application Next.js, vous pouvez importer l'hook useIntlayer comme suit :

Composant Client :
import { useIntlayer } from "next-intlayer"; // Utilisé dans les composants côté client
Composant Serveur :
import { useIntlayer } from "next-intlayer/server"; // Utilisé dans les composants côté serveur

Paramètres

key : Un identifiant sous forme de chaîne pour la clé de dictionnaire à partir de laquelle vous souhaitez récupérer le contenu.
locale (optionnel) : Une locale spécifique à utiliser. Si omise, l'hook utilise par défaut la locale définie dans le contexte client ou serveur.

Fichiers de Déclaration de Contenu

Il est crucial que toutes les clés de contenu soient définies dans des fichiers de déclaration de contenu pour éviter les erreurs d'exécution et garantir la sécurité des types. Cette approche facilite également l'intégration TypeScript pour une validation au moment de la compilation.

Les instructions pour configurer les fichiers de déclaration de contenu sont disponibles ici.

Exemple d'Utilisation dans Next.js

Voici comment vous pouvez implémenter l'hook useIntlayer dans une page Next.js pour charger dynamiquement du contenu localisé en fonction de la locale actuelle de l'application :

// src/pages/[locale]/index.tsx

import { ClientComponentExample, ServerComponentExample } from "@components";
import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
import { useIntlayer, IntlayerServerProvider } from "next-intlayer/server";

const HomePage: NextPageIntlayer = ({ params: { locale } }) => {
  const content = useIntlayer("homepage", locale);

  return (
    <>
      <p>{content.introduction}</p>
      <IntlayerClientProvider locale={locale}>
        <ClientComponentExample />
      </IntlayerClientProvider>
      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
      </IntlayerServerProvider>
    </>
  );
};

// src/components/ClientComponentExample.tsx

"use-client";

import { useIntlayer } from "next-intlayer";

const ClientComponentExample = () => {
  const content = useIntlayer("client-component");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

// src/components/ServerComponentExample.tsx

import { useIntlayer } from "next-intlayer/server";

const ServerComponentExample = () => {
  const content = useIntlayer("server-component");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

Gestion de la Localisation des Attributs

Pour localiser des attributs tels que alt, title, href, aria-label, etc., assurez-vous de référencer correctement le contenu :

<img src={content.image.src.value} alt={content.image.alt.value} />

Informations Complémentaires

Éditeur Visuel Intlayer : Apprenez à utiliser l'éditeur visuel pour une gestion de contenu plus aisée ici.

Cette documentation décrit l'utilisation de l'hook useIntlayer spécifiquement dans les environnements Next.js, offrant une solution robuste pour gérer la localisation dans vos applications Next.js.

Si vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.

Lien GitHub de la documentation