Next.js Integrazione: Documentazione del Hook useIntlayer

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

Importare useIntlayer in Next.js

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

• Componente Client:

  typescript

  import { useIntlayer } from "next-intlayer"; // Utilizzato nei componenti lato client

• Componente Server:

  tsx

  import { useIntlayer } from "next-intlayer/server"; // Utilizzato nei componenti lato server

Parametri

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

File di Dichiarazione dei Contenuti

È fondamentale che tutte le chiavi di contenuto siano definite all'interno dei file di dichiarazione dei contenuti per prevenire errori a 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 dei contenuti sono disponibili qui.

Esempio di Utilizzo in Next.js

Ecco come puoi implementare il hook useIntlayer all'interno di una pagina Next.js per caricare dinamicamente contenuti localizzati in base alla locale attuale 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 al contenuto correttamente:

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

Maggiori Informazioni

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

Questa documentazione descrive l'uso del hook useIntlayer specificamente all'interno degli ambienti Next.js, fornendo una soluzione robusta per gestire la localizzazione nelle tue applicazioni Next.js.