Estoy trabajando en un proyecto Next.js donde quiero implementar locales para páginas dinámicas usando i18n.
Lo siguiente está definido en mi archivo next.config.js:
module.exports = { i18n: { locales: ["en-US", "da-DK", "se-SE", "no-NO", "nl-NL"], defaultLocale: "en-US", }, reactStrictMode: true, images: { domains: ["images.ctfassets.net"], }, };Tengo una función getStaticPaths que estoy usando para obtener datos de nuestro CMS (Contenido) que funciona bien cuando especifico una sola configuración regional:
export async function getStaticPaths() { const categories = await ContentfulCategories.getAll(); const paths = categories.map((category) => { return { params: { category: category.slug }, locale: "en-US", }; }); return { paths, fallback: false, }; }Y aquí es donde me estoy atascando. Intenté insertar una matriz de configuraciones regionales del siguiente archivo de configuración, pero eso no funciona y me da el siguiente mensaje a pesar de que está definido en el archivo de configuración:
Error: Invalid locale returned from getStaticPaths for /integration/category/[category], the locale en-US,da-DK,se-SE,no-NO,nl-NL is not specified in next.config.js¿Cómo puedo especificar varias configuraciones regionales, por ejemplo, cuando configuro el sitio en example.com/en-US/ generará mi página dinámica para esa configuración regional o una de las otras del archivo de configuración?
Está utilizando la estrategia de enrutamiento de subruta. Debe hacer un bucle de las configuraciones regionales disponibles desde el contexto en getStaticPaths .
De los documentos :
Al aprovechar getStaticPaths, los entornos locales configurados se proporcionan en el parámetro de contexto de la función en entornos locales y el entorno predeterminado configurado en defaultLocale.
Básicamente dos bucles, primero categorías y luego locales. Puede usar un mapa plano para resolver esto, pseudocódigo:
export async function getStaticPaths({ locales }) { const paths = categories.flatMap(category => { return locales.map(locale => { return { params: { category: category.slug }, locale: locale, }; }); }); }