Add default lang and translated page url to main site url (sapper-i18n)

[oratoran]

Hi all,

I wonder how can I make sapper-i18n-template's url structure more i18n friendly (better for seo as well)

Eg: example.com (default lang: en) example.com/about (default lang: en)

example.com/pt/ (translated lang: pt with added lang 'pt' end of url) example.com/pt/sobre (translated lang: pt with translated 'about' text as 'sobre' added to url

There will be two benefits:

1. shareable direct links for translated content (eg: example.com/pt/about/)
2. easy to read full url for seo

Any idea to achieve this?

Thanks

[oratoran]

This is the exactly I am looking for: https://i18n.nuxtjs.org/routing/

Is it possible to sapper as well?

[Tal500]

Sapper use the architecture of Express/Polka middlewares.

You can add in routes folder a directory called "[lang]", and put the main layout file as the file "[lang]/_layout.svelte".

In this layout file you accept the parameter lang, and initialize svelte-I18n to the correct language. All the other routes files of your website should be as well under the directory "[lang]".

This will handle I18n paths, and for non-I18n oath you'd like to change the URL to an I18n path with the default language, this is how: In server.js/ts, you'll see it uses sapper middleware. You can prepend a custom middleware which redirect the user or just override the request header path from non-I18n paths to the the I18 path with the default language.