Internationalization in SvelteKit and How to Prevent Mistakes
summary
Sets up typesafe-i18n in SvelteKit in under ten minutes, installing a generator that watches translation files and emits TypeScript types so missing keys or wrong interpolation types fail at compile time. Shows language detection from request headers via hooks getSession, a language-switcher that lazy-loads locales on demand, a dynamic /lang route with pushState and popstate handling, fixes for SSR URL-language mismatch and an HTML lang workaround, and notes the bundle is tiny (~1 KB) with source repos on GitHub.
AI-written summary · about
chapters (9)
- 0:00Introduction to i18n
- 1:03Setting up the library
- 2:31Handling dynamic variables
- 3:42Benefits of type safety
- 4:20Auto-detecting user language
- 5:25Manual language switching
- 6:31Persisting language in URL
- 8:08Fixing SSR and routing
- 9:23Advanced features and closing
related talks
31mAnnoying Things About Svelte
29mGet Your Web App Development in Shape with SvelteKit
25mLocalization: Implementation and Testing... Locally
36mSvelte - Web App Development Reimagined
24mVue.js Globetrotter: Mastering i18n for User-Centric Web Applications
16mSvelteKit
10mVue + i18n = FUN
19mSimeon Griggs-Localization for real-world use-cases: Key learnings from onboarding global brands