How to create a multi-language website with SvelteKit 1.0 and typesafe-i18n

[ciscoheat]

This article helps you get over the "setup hurdle", using the latest SvelteKit to make i18n quite simple:
https://blog.encodeart.dev/typesafe-i18n-with-sveltekit

[ivanhofer]

Hi @ciscoheat thanks for sharing this!
I really like your article 👏

May I add just two small notes:

• it would be great if you can add a link to the repo where the example from the article gets fully shown. Some people might not follow along when they see just small code snippets. The full example would help them.
• I would rewrite the matcher like this:

  import type { ParamMatcher } from '@sveltejs/kit';
  +import { locales } from '$lib/i18n/i18n-util'
  
  export const match: ParamMatcher = (param) => {
   // No need to match 'en' since it's the default.
  -  return param === 'de';
  +  return locales.includes(param);
  };

  this ensures that the matcher will still work when you add a new locale

[ivanhofer]

Unfortunately not. But I would cast the other part

return locales.includes(param as Locales);

[ciscoheat]

I just realized that I can't use locales.includes directly, since en is not a valid route. So it has to be:

return param !== 'en' && locales.includes(param as Locales);

I have cleaned up the code a bit and will put a link to the repo later today.

[ivanhofer]

instead of the hardcoded string 'en', you could use the baseLocale variable :)

[ciscoheat]

The imports are getting larger than the code itself, but ok. :)

[ivanhofer]

I would see this as a good sign. Less code => less errors ^^