Next.js: Add example on how to do simple l10n

[sarukuku]

I feel like it would make sense to have a simple example on how to do l10n with next. I’m currently pondering what would be the best way to provide pages with a “select language" dropdown and how to reflect that in the URL and content.

If possible I'd like an example where the URL structure would follow the quite often seen pattern where the language code acts as the base path. Example below.

pages/index.js

example.com/en/
example.com/fr/

pages/item.js

example.com/en/item/1
example.com/fr/item/1

Talked shortly about this with @arunoda in next Slack.

[arunoda]

I suppose, we could do this easily via custom routing.
See: https://github.com/zeit/next.js#custom-server-and-routing

[rauchg]

Yep. Slice the first segment ($lang), expose it as a query parameter passed to the pages, then look up the pages under ./pages/$lang/ for example. Would be a cool example for sure

[impronunciable]

I've been thinking a lot about this. There are many ways, IMO the language is a user settings and shouldn't be on the URL. I'll try to provide an example in the following days.

[sarukuku]

@impronunciable I completely agree with you that language is a user setting. My point for having the language in the URL is simply for indexing purposes. I'm currently building a digital collection platform where translations of the same content are provided in multiple languages. I'd like it to be possible for search engines to find all these different language versions.

[sarukuku]

@rauchg Why have different pages for every language? How about passing that sliced query parameter to the pages, using it to fetch localized content from the API and then using the localized data returned by the API to render the page. Might be that I just don't understand your idea behind the ./pages/$lang/.

[rauchg]

@sarukuku how else do you internationalize labels, UI, right-to-left and so on ? If you do it dynamically, you ship code to people who don't need it or want it

[sarukuku]

@rauchg True. In my case I'm loading all UI labels also from the API and I don't need to do right-to-left or deal with internationalizing currencies, dates etc. My case is just so simple that the code overhead is minimal.

[rauchg]

Right, but for the example I think what I suggested is more broadly applicable. What do you think?

[sarukuku]

@rauchg I agree.