This content originally appeared on DEV Community and was authored by dango0812
When running a global service, multilingual support becomes an inevitable challenge.
Next.js provides built-in i18n features, and when used with i18next, translation management becomes more streamlined.
However, when working on i18n, you often face questions like:
“Why is the language code added even for the default language?”
“Shouldn’t the default language be served without a language prefix?”
“Will this cause any SEO issues?”
In this article, we’ll show you how to use Next.js Middleware to remove the language prefix from the main domain for the default language.
Why is the domain important for SEO?
Search engines may recognize multiple URLs with the same content as duplicate content.
For example:
domain.com/about
domain.com/ko/about
domain.com/ja/about
...
If all three URLs serve the same content in the same language, search engines might see them as duplicates.
This can lead to:
Diluted SEO rankings (because link equity is split)
Indexing issues (search engines unsure which page to prioritize)
Reduced crawl efficiency
To prevent this, it’s important to:
Use proper canonical tags
Configure hreflang attributes for multilingual versions
Ensure only one version is accessible for each language when possible
Managing URLs carefully in a multilingual setup is essential for avoiding SEO penalties and maximizing visibility.
how to set up i18next with Next.js
blog: https://www.locize.com/blog/i18n-next-app-router
i18next library middleware code
1. Language Check
2. Redirect if language in path is not supported
if (!lngInPath && !req.nextUrl.pathname.startsWith('/_next')) {
return NextResponse.redirect(new URL(`/${lng}${req.nextUrl.pathname}
${req.nextUrl.search}`, req.url))
}
3. Continue
NextResponse.next({ ... })
modified middleware code
1. Language Check
2. Language Check & Fallback Language Check
3. Handling access to the fallback language (replace fallback language in URL)
Replace the fallback language segment in the target URL:
target = target.replace(`/${fallbackLng}`, target === `/${fallbackLng}` ? "/" : "");
-> Redirect not includes fallback language
NextResponse.redirect(new URL(target, req.url));
-> Rewrite the fallback language page
NextResponse.rewrite(new URL(`/${fallbackLng}${pathname}${search}`, req.url));
4. Continue
NextResponse.next({ ... })
Dive deeper on github.
code : https://github.com/dango0812/tanstack-virtual-grid/blob/main/middleware.ts
This content originally appeared on DEV Community and was authored by dango0812