Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

74
Vistas
Next.js i18n translate URL occurs 404 error?

I'm making a multilingual service using next-i18next. I wanted some of my routes translate too for instance:

EN: /contact => default language

IT: /fa/ارتباط-با-ما => second language

For this purpose, I used translated URL routes by rewrites in my next.config.js file.

/** @type {import('next').NextConfig} */

const { i18n } = require('./next-i18next.config');
const nextConfig = {
  i18n,
  async rewrites() {
    return [
      {
        source: '/ارتباط-با-ما',
        destination: '/contact-us',
      },
    ];
  },
};

module.exports = nextConfig;

I created my navigation with this guide:‌ How to setup i18n translated URL routes in Next.js?

you can check out my code there https://stackblitz.com/edit/nextjs-thwgak

Problem:‌ Go to the home page then change the language to Farsi after that go to the contact page you see so far so good but when you reload the page on the contact page you get a 404 error.

Is this a bug or am I wrong? Where did I go wrong? Any idea?

ps question: what do rewrites affect SEO?

5 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

The word ارتباط-با-ما gets URL encoded when it reaches the Next.js server, so you have to also encode your source value accordingly for it to match the rewrite rule.

const nextConfig = {
    async rewrites() {
        return [
            {
                source: `/fa/${encodeURIComponent('ارتباط-با-ما')}`,
                destination: '/fa/contact-us',
                locale: false
            }
        ];
    }
};
5 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.