Internationalization with Next.js 🗺️ Adding i18n to an existing React app! 🔴 LIVE Coding & Chill
Every single app could use Internationalization / Localization, but most don’t offer it! Why? Because it’s hard!
Take heart, it’s significantly easier when you know what you’re doing with modern tooling, so let’s go step by step today and figure it all out!
We will be adding i18n to the app we’ve built live going through Next.jsLearn, and we will *not* be refactoring to prefix all routes with a `[lang]` path! No `en/dashboard`, or `cz/dashboard/invoices`, we’ll make it all work on the same routes our app was always working!
Playlist with all 3 parts of us building this app: • Fullstack React App with Next.js 14 and th...
We went even further beyond the official curriculum 🚀
🚀 Click around the deployed app yourself: https://nextjs-dashboard-ecru-theta.v...
💻 See its code, open-source and free: https://github.com/jmagrippis/nextjs-...
— COMMUNITY —
Our DISCORD SERVER 👾: / discord
— 🥳🥳🥳 —
— Agenda —
✅ What’s Internationalization / Localization? i18n / l10n: https://nextjs.org/docs/app/building-...
✅ Getting the user’s language preference! https://www.npmjs.com/package/negotiator
✅ Adding the correct language to the HTML!
✅ Make our own getter for i18n messages!
✅ inlang integration with ParaglideJS: https://inlang.com/m/gerre34r/library...
✅ Adding a language toggle with React Server Actions and a cookie!
— BONUS —
✅ Demoing the inlang browser editor: https://inlang.com/editor
[ ] Adding another language!
[ ] Call for extra features 😄
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
Next.js: https://nextjs.org/
InLang: https://inlang.com/
ParaglideJS: https://inlang.com/m/gerre34r/library...
Next/Learn: https://nextjs.org/learn
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Instagram & Twitter! And remember our DISCORD SERVER 😉: / discord
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌
Stream number 65!
—
TIMESTAMPS
—
0:00 - What are we doing today? What’s i18n / l10n?
5:55 - Getting the user’s language preference in middleware!
24:07 - Setting the correct `lang` to the `html` element
39:40 - Making our own “dictionaries” to show copy in the user’s preferred language!
49:30 - DEMO 🥳 If my calculations are correct…
52:40 - Can inlang and Paraglide JS make the Developer Experience better?
54:50 - inlang translations web editor demo
57:40 - Adding relevant dictionaries to the VSCode spell-checker
1:00:00 - What VSCode plugins do I recommend anyway?
1:01:15 - Setting up inlang with ParaglideJS
1:16:00 - Using the generated ParaglideJS methods containing our translations
1:17:05 - Letting ParaglideJS the correct language tag
1:24:00 - Chat question: What’s the importance of schemas?
1:27:50 - Adding more translations
1:29:20 - Debugging ParaglideJS not always respecting the language tag
1:56:00 - Adding a language toggle / dropdown
2:02:45 - Checking for a COOKIE with the user’s language in our middleware
2:14:25 - Setting a COOKIE with the user’s language