Estoy creando una aplicación Next.js con internacionalización usando next-i18next. Se generan páginas para todas las páginas de mi sitio tanto en inglés como en francés, excepto las páginas con rutas dinámicas: (es decir, blog/[id]/[blog-title] ). Para páginas con rutas dinámicas, las páginas se generan para inglés, pero no para francés.
Debo señalar que las entradas del blog son las mismas en ambos idiomas. Entonces, si el usuario hace clic en una entrada de blog en la lista, obtendrá la misma entrada de blog.
Cuando un usuario de idioma francés va a una página con una ruta dinámica, obtiene un 404. Soy nuevo en React y Next, así que podría estar haciendo algo tonto aquí.
// next-i18next.config.js module.exports = { i18n: { locales: ['en', 'fr'], defaultLocale: 'en', localeDetection: true, }, } // // blog\[id]\[title] // export async function getStaticPaths() { const response = await axios.get('https://api.myappi.com/blog') const posts = response.data const paths = posts.map((post: Props) => ({ params: { id: post.Id, title: post.Title }, })) return { paths, fallback: false } } export async function getStaticProps(props: IStaticProps) { const { id, locale } = props.params const response = await axios.get(`https://api.myappi.com/blog/${id}`) const post = await response.data if (!post) { return { notFound: true, } } return { props: { Id: post.Id, Title: post.Title, Blog: post.Blog, DatePosted: post.DatePosted, PostedBy: post.PostedBy, ...(await serverSideTranslations(props.locale, ['common', 'blog'])) } } }Para las rutas dinámicas, debe devolver explícitamente las configuraciones regionales que desea que se generen previamente desde la función getStaticPaths . Si no lo hace, Next.js solo generará páginas para la configuración regional predeterminada.
De la documentación de enrutamiento internacionalizado :
Para las páginas que usan
getStaticPropscon rutas dinámicas, todas las variantes de configuración regional de la página que se desea preprocesar deben devolverse desdegetStaticPaths. Junto con el objetoparamsdevuelto para laspaths, también puede devolver un campo delocaleregional que especifique qué configuración regional desea representar.
Esto se puede lograr modificando su función getStaticPaths para generar una ruta para cada combinación de slug/locale.
export async function getStaticPaths({ locales }) { // Get available locales from `context` const response = await axios.get('https://api.myappi.com/blog') const posts = response.data const paths = posts .map((post: Props) => locales.map((locale) => ({ params: { id: post.Id, title: post.Title }, locale // Pass locale here }))) .flat() // Flatten array to avoid nested arrays return { paths, fallback: false } }