I am using Next js with i18n-routing with following next.config.js
module.exports = {
i18n: {
locales: ['en', 'fr', 'nl'],
defaultLocale: 'en',
},
}
To set custom html lang attribute. I am overriding html lang attribute to en-IN using _document.js
export default function Document() {
return (
<Html lang="en-IN"> // overriding it to en-IN
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
But when I try to add query params to the url using router.replace(). It changes the html lang attribute to current local i.e. "en".
export default function IndexPage(props) {
const router = useRouter();
const addQueryParam = () => {
router.replace(
{ query: { foo: 'bar' } },
{ query: { foo: 'bar' } },
{ shallow: true }
);
};
return (
<div>
<h1>Index page </h1>
<button onClick={addQueryParam}>Add Query Param</button>
</div>
);
}
StackBlitz Code Sample: In this sample code when i click on button, it adds query param to url and also changes the html lang attribute to en.
I came to know through Next.js i18n-routing documentation that it does it for SEO.
So how can I prevent Next.js from changing html lang attribute?