CODEWITHSUNDEEP
javascriptnext.jsi18next
hmd.fullstack
hmd.fullstack

Reputation: 568

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?

Upvotes: 1

Views: 2056

Answers (1)

juliomalves
juliomalves

Reputation: 50248

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
            }
        ];
    }
};

Upvotes: 1

Related Questions