I am developing a multilingual service utilizing next-i18next. I wanted to have some of my routes translated as well, for example:
EN: /contact => default language
IT: /fa/ارتباط-با-ما => second language
To achieve this, I utilized translated URL routes by using 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 set up my navigation following this tutorial: How to setup i18n translated URL routes in Next.js?
You can view my code on https://stackblitz.com/edit/nextjs-thwgak
Issue: If you navigate to the home page, switch the language to Farsi, then go to the contact page, everything seems fine. However, upon reloading the page on the contact page, you encounter a 404 error.
Is this a bug or have I made a mistake? Any insights on what went wrong would be appreciated.
PS Question: How do rewrites impact SEO?