typesafe-i18n demo sveltekit

Here is a video for better context

This example demonstrates a typesafe-i18n-integration with SvelteKit.

LIVE-DEMO: https://typesafe-i18n-demo-sveltekit.vercel.app

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

What is missing:

• opinion how to localize slugs
  this highly depends where your data comes from. This will probably differ from project to project.
• cross-links between your language slugs
  like mentioned above, this will differ from project to project. You can find useful resources here:\
  • rel="alternate" links
  • hreflang attribute
  • SEO optimized examples

add typesafe-i18n to an existing SvelteKit project

If you want to implement the solution in a existing project, you can take a look at the commit history to see a step-by-step guide.

JavaScript version

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.

learn more

If you want to know more about typesafe-i18n head over to the main repo:

https://github.com/ivanhofer/typesafe-i18n