Panoramica

gt-next 6.10.0 introduce il supporto sperimentale per i componenti in cache e depreca al contempo le funzioni di richiesta statica legacy di gt-next@6.9.

• Aggiunto il supporto sperimentale per i componenti in cache con experimentalLocaleResolution
• Deprecate le funzioni di richiesta statica legacy di gt-next@6.9

Componenti in cache

Per abilitare il supporto per i componenti in cache, aggiungi experimentalLocaleResolution: true alla configurazione di gt-next e segui la guida ai Cache Components di Next.js. Quando usi componenti in cache con contenuti traducibili, devi passare locale come parametro per garantire la corretta invalidazione della cache tra impostazioni regionali diverse.

Considera questa struttura dell'applicazione:

import { Suspense } from "react";
import { getLocale, getLocales } from "gt-next/server";

export const generateStaticParams = () => {
  return getLocales().map(locale => ({ locale }))
}

async function CachedContent({locale: _locale}: {locale: string}) {
  "use cache"
  return (
    <div>
      <T><h1>Cached Content</h1></T>
    </div>
  )
}
export default async function Home() {
  const locale = await getLocale()
  return (
    <div>
      <CachedContent locale={locale} />
    </div>
  );
}

Il requisito del parametro locale

I componenti in cache usano i propri parametri come chiavi della cache; qualsiasi componente in cache che contenga contenuti traducibili deve accettare un parametro locale per aggiornarsi quando cambia l'impostazione regionale dell'utente. Ad esempio, CachedContent deve accettare un parametro locale per creare voci di cache separate per ogni impostazione regionale. Senza questo parametro, il componente restituirebbe lo stesso contenuto memorizzato nella cache indipendentemente dall'impostazione regionale dell'utente.

Note sulla configurazione

Quando experimentalLocaleResolution è abilitato:

• Il proxy I18n deve essere abilitato perché la risoluzione dell'impostazione regionale funzioni (vedi I18n Proxy)
• Sovrascrive qualsiasi funzione getLocale personalizzata (la risoluzione dell'impostazione regionale avviene leggendo il percorso dell'URL)
• Disabilita le funzioni getRegion e getDomain
• È in conflitto con la configurazione deprecata experimentalEnableSSG: può esserne abilitata solo una alla volta
• Puoi personalizzare il nome del parametro dell'impostazione regionale con experimentalLocaleResolutionParam (il valore predefinito è 'locale')

export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
  // Facoltativamente, personalizza il nome del parametro
  experimentalLocaleResolutionParam: 'lang',
})

Deprecazione delle funzioni di richiesta statica legacy

Dopo l'introduzione del supporto per il rendering statico in gt-next@6.9, stiamo deprecando le funzioni di richiesta statica legacy (getStaticLocale, getStaticRegion, getStaticDomain) a favore delle funzioni di richiesta standard (getLocale, getRegion, getDomain).

Questa deprecazione riflette il nostro obiettivo di semplificare l'API mantenendo al tempo stesso tutte le funzionalità. Le funzioni statiche legacy continueranno a funzionare, ma genereranno avvisi di deprecazione. Per uniformità, ti consigliamo di migrare alle funzioni di richiesta standard.

Guida alla migrazione

SSG precedente

Sostituisci le funzioni di richiesta statica deprecate:

// Prima (deprecato)
export default withGTConfig(nextConfig, {
  experimentalEnableSSG: true,
})

// Dopo  
export default withGTConfig(nextConfig, {
  // Accessibile per impostazione predefinita
})

Rimuovi eventuali funzioni personalizzate getStaticLocale, getStaticRegion o getStaticDomain e usa invece funzioni personalizzate getLocale, getRegion o getDomain. Devi aggiungere una funzione getLocale personalizzata e disabilitare la funzione getRegion. Per ulteriori informazioni, consulta la guida SSG.

import { locale } from "next/root-params";

export default async function getLocale() {
  return await locale();
}

export default async function getRegion() {
  return undefined;
}

Per i componenti in cache

Abilita la risoluzione sperimentale dell'impostazione regionale e assicurati che i componenti in cache ricevano i parametri dell'impostazione regionale:

const nextConfig = {
  cacheComponents: true,
}

// Configurazione
export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
})

// Implementazione del componente
async function MyCachedComponent({locale}: {locale: string}) {
  "use cache"
  // Il tuo contenuto internazionalizzato qui
  return <T>Content for <Var>{locale}</Var></T>
}

// Utilizzo
export default async function Page() {
  const locale = await getLocale()
  return <MyCachedComponent locale={locale} />
}