filmov
tv
Translating a Next Js Website (App Router i18n)
Показать описание
I migrated my website to the `app` directory router. However, it’s a multilingual website with content both in French and English, and the translation library I was using, i18next, doesn’t work server-side. So this is the story of how I rolled my own translation system and what I had to set up to make it work.
And even if you don’t need to translate your NextJS website, you might need to use a middleware or a lookup for something else. If you don’t, this video on the new SEO features in Next JS might be interesting to you.
For those of you who are still here, there are three parts to this :
- first how I structured my app directory to handle locales
- second, how I coded the lookup function to translate strings within pages
- third, how I set up the middleware to switch users from one version to the other depending on their browser language.
Let’s dive right in.
----
And even if you don’t need to translate your NextJS website, you might need to use a middleware or a lookup for something else. If you don’t, this video on the new SEO features in Next JS might be interesting to you.
For those of you who are still here, there are three parts to this :
- first how I structured my app directory to handle locales
- second, how I coded the lookup function to translate strings within pages
- third, how I set up the middleware to switch users from one version to the other depending on their browser language.
Let’s dive right in.
----
0:08:57
Translating a Next Js Website (App Router i18n)
0:28:40
Internationalization in NextJs 14 with Next-Intl | i18n
0:17:44
Translate website content using Next.js internationalization and next-i18next
0:05:25
Next-translate 1.0 demo - I18n your Next.js +10 pages in an easy way
0:16:10
Translate Your Website with i18next
0:29:32
Next.js App Router with i18next (Internationalization Tutorial)
0:08:07
NextJS Routeur App : Traduction / i18n
0:03:10
Translate Next.js website with AI - weploy.ai
0:04:42
Google Translate API - Adding Multiple Language Translation Feature to Your Website
0:05:05
Type-Safe Translations with i18next for your TypeScript project
0:09:16
Internationalization (i18n) with Next.js!
0:17:51
Implement Awesome Next.js 14 Internationalization (i18n) with App Router and next-intl
0:21:48
NextJS APP Router | i18n Internationalization (i18next - next-intl) | Multiple languages (idioms)
0:28:10
Next.js 15 Multiple Languages in 2024 | i18n + Zod Error Translation Guide
0:20:35
How to setup i18n Language Translation between English and French (Next.js 13)
0:01:56
How to add Google Translator to your Next Js Projects #Shorts
0:05:24
Turn Figma design into Nextjs or Html Code Easily | Tutorial 2024 🔥
0:13:29
Building Internationalization in a Static NextJS Application Without External Libraries
0:22:09
Next.js App Directory & i18n - Full Tutorial
0:10:04
Next.js i18n: App Router + next-intl Tutorial
0:22:27
Internationalization in NextJs 13
0:11:15
NextJS 14 - i18next Multiple Languages
0:34:19
Add Multi Language Support in Next.js 15 Project
0:38:45
Nextjs Multi-Idioma
Комментарии