Here is a video for better context. SvelteKit has undergone some major changes since this video was published. For the most up-to-date way of handling i18n, please refer to the code in this repository.
This example demonstrates a typesafe-i18n-integration with SvelteKit.
[!IMPORTANT]
Make sure you adopt app.d.ts for full TypeScript type inference. More context here
It is a basic example and shows:
- basic i18n setup of three different locales
- auto-detecting user language preferences
- full SSR support
- SEO optimizations
- locale switching
- lazy loading of locales
- persistent locale state via language routes
- typesafety features of
typesafe-i18n - plural rules
- locale specific date-formatting
rel="alternate"linkshreflangattribute
What is missing:
- opinion how to localize slugs
this highly depends where your data comes from. This will probably differ from project to project.
You can find the exact same example in a JavaScript only version here.
It offers the same typesafety features but instead of TypeScript files it is written in JavaScript with JsDoc comments.
If you want to know more about typesafe-i18n head over to the main repo: