Ricevi notifiche sui prossimi lanci di Intlayer

    Come recuperare la locale dai cookie / header

    Uso degli Hooks (Consigliato)

    Per la maggior parte dei casi d'uso, è consigliato recuperare la locale corrente usando l'hook useLocale perché viene risolto automaticamente. Questo funziona in modo simile al composable useLocale in Vue.js.

    ts
    import { useLocale } from "next-intlayer";// oppure import { useLocale } from "react-intlayer";// oppure import { useLocale } from "vue-intlayer";ts;// Uso lato clientconst { locale } = useLocale();

    Per i componenti server, puoi importarlo da:

    tsx
    import { useLocale } from "next-intlayer/server";const Test = () => {  const { locale } = useLocale();  return <>{locale}</>;};const Page = async ({ params }) => {  const { locale } = await params;  return (    <IntlayerServerProvider locale={locale}>      <Test />    </IntlayerServerProvider>  );};

    Esiste anche un hook useLocaleCookie che risolve solo il valore del cookie.

    Configurazione manuale del cookie

    Puoi dichiarare un nome personalizzato per il cookie come

    ts
    import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  middleware: {    cookieName: "myCustomLocaleCookie", // il valore predefinito è 'intlayer-locale'  },};export default config;

    il recupero come

    Lato client

    ts
    // Uso del nome cookie predefinitoconst locale = document.cookie  .split("; ")  .find((row) => row.startsWith("intlayer-locale="))  ?.split("=")[1];// Uso di un nome cookie personalizzatoconst locale = document.cookie  .split("; ")  .find((row) => row.startsWith("myCustomLocaleCookie="))  ?.split("=")[1];

    Lato server (Next.js)

    ts
    import { cookies } from "next/headers";// Uso del nome cookie predefinitoconst locale = cookies().get("intlayer-locale")?.value;// Uso di un nome cookie personalizzatoconst locale = cookies().get("myCustomLocaleCookie")?.value;

    Se la locale non è ancora impostata

    La locale viene impostata come cookie solo una volta che l'utente seleziona esplicitamente la locale. Per impostazione predefinita, per i nuovi visitatori, la locale viene interpretata dai campi degli header.

    Puoi rilevare la locale preferita dall'utente dagli header della richiesta. Ecco un esempio di come gestirlo:

    ts
    /** * Rileva la locale dagli header della richiesta * * L'header accept-language è il più importante per il rilevamento della locale. * Contiene una lista di codici lingua con valori di qualità (q-values) che indicano * le lingue preferite dall'utente in ordine di preferenza. * * Esempio: "en-US,en;q=0.9,fr;q=0.8,es;q=0.7" * - en-US è la lingua primaria (q=1.0 è implicito) * - en è la seconda scelta (q=0.9) * - fr è la terza scelta (q=0.8) * - es è la quarta scelta (q=0.7) */import { localeDetector } from "@intlayer/core";/** * Esempio di header di negoziazione che i browser tipicamente inviano * Questi header aiutano a determinare la lingua preferita dall'utente */const exampleNegotiatorHeaders: Record<string, string> = {  "accept-language": "en-US,en;q=0.9,fr;q=0.8,es;q=0.7",  "accept":    "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",  "user-agent":    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",};// Esempio di utilizzo:const detectedLocale = localeDetector(exampleNegotiatorHeaders);