es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo generar rutas dinámicas para localizaciones no predeterminadas en Next.js?

02 Aug, 2023 Programación

Estoy construyendo una aplicación Next.js con internacionalización utilizando next-i18next. Se generan páginas para todas las páginas de mi sitio tanto en inglés como en francés, excepto para las páginas con rutas dinámicas: (es decir, blog/[id]/[blog-title]). Para las páginas con rutas dinámicas, se generan páginas para inglés, pero no para francés.

Debo mencionar que las entradas del blog son las mismas en ambos idiomas. Por lo tanto, si el usuario hace clic en una entrada de blog en la lista, obtendrán la misma entrada de blog.

Cuando un usuario de habla francesa va a una página con una ruta dinámica, obtienen un error 404. Soy nuevo en React y Next, así que podría estar haciendo algo incorrecto 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']))
    }
  }
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema está en la función getStaticPaths, la cual genera las rutas para las rutas dinámicas. Actualmente, solo está generando rutas para la configuración regional predeterminada (inglés) y no para la configuración regional francesa. Para solucionar esto, debes modificar la función para generar rutas para ambas configuraciones regionales de la siguiente manera:

    //
// blog\[id]\[title] 
//
export async function getStaticPaths() {
  const response = await axios.get('https://api.myappi.com/blog')
  const posts = response.data

  const paths = []
  posts.forEach((post: Props) => {
    paths.push({
      params: { 
        id: post.Id, 
        title: post.Title 
      },
      locale: 'en' // configuración regional predeterminada (inglés)
    })
    paths.push({
      params: { 
        id: post.Id, 
        title: post.Title 
      },
      locale: 'fr' // configuración regional francesa
    })
  })

  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']))
    }
  }
}

    Con esta modificación, se generarán rutas para ambas configuraciones regionales, y los usuarios de idioma francés ya no obtendrán un error 404 al visitar una página con una ruta dinámica.

Comments are closed.