First of all, check the official guide explaining how to handle internationalized routing in Next.js 13 if you are not familiar with the dynamic [lang] segment.
TL;DR
Avoid dynamic [lang] segment because:
- It makes URL translations and page links clunky.
- It keeps your runtime busy checking tons of rewrites.
- It creates content duplication by making your pages available on multiple URLs.
- It knocks your SEO score down.
Use next-roots, the ultimate library for i18n file-based routing:
- It generates translated file routes within explicitly stated locales.
- It provides a type-safe API for creating page links
- It needs no rewrites
The dynamic [lang] segment sucks!
Don't get me wrong it works well in some cases but when you need to take care of your SEO score, it sucks. While the content translation is a breeze the URL translations become clunky.
Config option called rewrites can be used to set all possible URL translations and point them to proper destinations. Unfortunately, that goes against the benefits of file-based routing. All those rewrites must be checked before every request finds its target. In runtime. It is true even for the URLs that can be routed directly with no rewrites.
Not to mention the hard time of managing those rewrites for a site with 30+ routes and 5 localizations. And creating page links? Uff, even more frustrating. And yet the most annoying drawback is that your site ends up with one page accessible on multiple URLs.
That is because dynamic [lang] segment does not care about translated URL paths by default. Even you can set rewrites rules you still end up with having one page available on two URLs.
Such content duplication simply knocks your SEO score down with no mercy. Isn't there a way to overcome all those pitfall? Well, there is. By utilizing static locales.
Static locales segments rock!
Drop that dynamic [lang] parent segment and spread all your translated file routes among explicitly stated locales.
That keeps your runtime free of looping through the rewrites. No page is available on multiple URLs. And your SEO score is not damaged.
However, managing those translations stays cumbersome and page links are far from being easy to create. For those to become convenient you need a generator. And a router.
Meet next-roots
The ultimate library for handling file-based i18n routing in your app. It treats your file routes as they were meant to be - just as routes with no business logic. It generates all translated file routes based on the configuration schema. And it provides a type-safe API for creating page links. Neat!
Find more in next-roots repo or in Step-by-step guide for SEO friendly i18n routes in Next.js 13
Top comments (0)