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