Panoramica

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

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

Componenti in cache

Per abilitare il supporto per i componenti memorizzati in cache, aggiungi experimentalLocaleResolution: true alla configurazione di gt-next e segui la guida NextJS Cache Components. Quando utilizzi componenti in cache con contenuti traducibili, devi passare il locale come parametro per garantire la corretta invalidazione della cache tra i vari locale.

Considera la seguente 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>Contenuto nella cache</h1></T>
    </div>
  )
}
export default async function Home() {
  const locale = await getLocale()
  return (
    <div>
      <CachedContent locale={locale} />
    </div>
  );
}

Il requisito relativo al parametro locale

I componenti memorizzati in cache utilizzano i propri parametri come chiavi di cache; qualsiasi componente in cache che contenga contenuti traducibili deve accettare un parametro locale affinché si aggiorni quando cambia la locale di un utente. Ad esempio, CachedContent deve accettare un parametro locale per creare voci di cache separate per ciascuna locale. Senza questo parametro, il componente servirebbe lo stesso contenuto memorizzato in cache indipendentemente dalla locale dell'utente.

Note di configurazione

Quando experimentalLocaleResolution è abilitato:

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

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

Deprecazione delle funzioni legacy per le richieste statiche

In seguito all'introduzione del supporto al rendering statico in gt-next@6.9, stiamo deprecando le funzioni legacy per le richieste statiche (getStaticLocale, getStaticRegion, getStaticDomain) a favore delle funzioni di richiesta standard (getLocale, getRegion, getDomain).

Questa deprecazione è in linea con il nostro obiettivo di semplificare la superficie dell'API mantenendo al contempo la piena funzionalità. Le funzioni statiche legacy continueranno a funzionare, ma emetteranno avvisi di deprecazione. Per coerenza, consigliamo di migrare alle funzioni di richiesta standard.

Guida alla migrazione

Legacy SSG

Sostituisci le funzioni di richiesta statica deprecate:

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

// After  
export default withGTConfig(nextConfig, {
  // Accessibile di default
})

Rimuovi tutte le funzioni personalizzate getStaticLocale, getStaticRegion o getStaticDomain in favore delle funzioni personalizzate getLocale, getRegion o getDomain. È necessario aggiungere una funzione personalizzata getLocale 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 memorizzati in cache

Abilita la risoluzione sperimentale del locale e assicurati che i componenti memorizzati in cache ricevano i parametri di locale:

const nextConfig = {
  cacheComponents: true,
}

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

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

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