Internationalization(i18n) of your Next.js 13 apps using i18next - enterJS 2023

In this talk, learn how to build multilingual Next.js 13 apps using middleware and handle server-side and client-side rendering.

Do you want to build multilingual Next.js 13 apps? In this talk, learn about defining multilingual URL paths and handling internationalization (i18n) at the server and client side using middleware, i18next, and component level i18n. In addition, the talk will demonstrate how to determine user locale using middleware.

Transcript

1. Internationalization(i18n) of your Next.js 13 apps using i18next By Anil Kumar, @anilbms75 enterJS 2023
3. @anilbms75 Agenda 1. Importance of Internationalization (i18n) 2. Nextjs 13 Server Components i18n ◦ URL path ◦ Middleware ◦ Demo 3. I18n-ally tool
4. Why Internationalization is Necessary?
5. slack.com vs slack.com/intl/de-de/
9. Internationalization (i18n) Analogy Source: pinterest
11. Nextjs 13 Server Components i18n
13. URL Path Source: Vercel
14. my.app (Root page) my.app/en (English home page) my.app/de (German home page) my.app/en/my-second-page my.app/de/my-second-page
15. Source: Vercel
17. Language Detection
18. Hardware Level
19. Keyboard Based on Language
20. Operating System Level
21. Language Select on iPhone
22. Native Application Level
23. Chrome Browser Language Selection
24. Web Application Level
26. What Is the User's Preferred Language?
27. Middleware is another part of your application—it’s code that executes before a request is processed on a site. That code will typically process or modify the response by rewriting and redirecting.
28. Cookie Request header Fallback language
30. Accept-Language
34. Add Translation Files
35. Initiate i18next
41. @anilbms75 Resources 1. Demo app & GitHub repo 2. i18n with Next.js 13 and app directory 3. i18n your Nextjs 13 app using i18next demo video 4. I18n-ally tool
42. Thanks Twitter: @anilbms75 Email: anilbms75@gmail.com Linkedin: linkedin.com/in/anilkrishnashetty
43. Slides:speakerdeck.com/anilkumar/internati onalization-i18n-of-your-next-dot-js-13-apps -using-i18next