Integrazione Next.js: Documentazione Hook useIntlayer

L'hook useIntlayer è progettato per applicazioni Next.js per recuperare e gestire contenuti localizzati in modo efficiente. Questa documentazione si concentrerà su come utilizzare l'hook all'interno di progetti Next.js, garantendo pratiche di localizzazione corrette.

Importare useIntlayer in Next.js

A seconda che tu stia lavorando su componenti client-side o server-side in un'applicazione Next.js, puoi importare l'hook useIntlayer come segue:

• Componente Client:

  typescript

  Copia contenuto

  Copiare il codice

  Copiare il codice nella clipboard

  import { useIntlayer } from "next-intlayer"; // Usato nei componenti client-side

• Componente Server:

  tsx

  Copia contenuto

  Copiare il codice

  Copiare il codice nella clipboard

  import { useIntlayer } from "next-intlayer/server"; // Usato nei componenti server-side

Parametri

1. key: Un identificatore stringa per la chiave del dizionario da cui si desidera recuperare il contenuto.
2. locale (opzionale): Una locale specifica da utilizzare. Se omesso, l'hook utilizza la locale impostata nel contesto client o server.

File del Dizionario

È fondamentale che tutte le chiavi di contenuto siano definite all'interno dei file di dichiarazione del contenuto per evitare errori di runtime e garantire la sicurezza dei tipi. Questo approccio facilita anche l'integrazione con TypeScript per la validazione a tempo di compilazione.

Le istruzioni per configurare i file di dichiarazione del contenuto sono disponibili qui.

Esempio di utilizzo in Next.js

Ecco come implementare il hook useIntlayer all'interno di una pagina Next.js per caricare dinamicamente contenuti localizzati in base alla locale corrente dell'applicazione:

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

const HomePage: NextPageIntlayer = async ({ params }) => {
  const { locale } = await params;

  const content = useIntlayer("homepage", locale);

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

"use-client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

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

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

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

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

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

Gestione della Localizzazione degli Attributi

Per localizzare attributi come alt, title, href, aria-label, ecc., assicurati di fare riferimento correttamente al contenuto:

<img src={content.image.src.value} alt={content.image.alt.value} /><img src={content.image.src.toString()} alt={content.image.alt.toString()} /><img src={String(content.image.src)} alt={String(content.image.alt)} />

Ulteriori Informazioni

• Intlayer Visual Editor: Scopri come utilizzare l'editor visuale per una gestione più semplice dei contenuti qui.

Questa documentazione illustra l'uso del hook useIntlayer specificamente negli ambienti Next.js, fornendo una soluzione robusta per la gestione della localizzazione nelle tue applicazioni Next.js.