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.
----
Want to go into further depth? Head to kodaps.dev/

[@muhammadtawil1354]

no source code?

[@vibray0]

I have been looking for this and your SEO using the app router video for days! thank you!! im starting to build a project and these come in handy 💪

[@KodapsAcademy]

Glad it was helpful :)

[@niki5223]

Amazed by the line by line explanation👌

[@steckdev]

Thanks again for providing this solution. We needed to add internationlization to our project and having this as a ready tool for being able to improve our ability to get our content up faster.

[@cartfion]

Have you tried somethine like "next-intl"?

[@mohamed-zhioua]

i really wish you explain it more in depth with code source repo and show us how you apply on dummy data that u import from data file to a component

[@icedev8078]

So how about urls ? I understand how to change language param from but it you want have url friendly? I think i can create one [aboutUrl] for can create 2 pages with 2 URLs but how can use the midelware to change language ?

[@user-vw6nf1me8b]

Hi, are you able to share the source code for it? Would appreciate it!
Thanks for the great video, definitely understood it more now

[@deepaknegi3940]

Can you please make a video on how toh use next-auth and i18n in a single project.

[@parshuram3191]

But what if I want to fetch data from a firebase or any other database. I can't have the data locally.

[@Saleh_Balakisiyev]

I saw that you are passing lang to props (I am guessing for client components) Is it a good practice do prop drilling?

[@prohacker5086]

No

[@cartfion]

Great solution for the translations, very cool how you did... Is that a reason why someone would implement that instead of using a already tested and in the vercel community a 3rd party library? Something like `next-intl`?
Great video!

[@KodapsAcademy]

Because next intl has only just announced support for server components, it used to only provide client side hooks (when this video was made)

[@carlosromera6049]

This is so helpful. Thanks! 🙂
Do you know how to get the translations (json files) from an http endpoint, instead of having them locally stored?

[@KodapsAcademy]

yeah you would just get the JSON using an async process, and then parse it, instead of importing it :)

[@carlosromera6049]

@@KodapsAcademy Thanks for the reply :)
I already tried but I just keep getting the typical text content mismatch error (between client and server pre-rendered pages). Any idea why?

[@Rasty_Boss]

how translate if translation words on backend side ?

[@jeandesauw7646]

Hi, could you do an explaination of how you implemented the update lang button in your navbar ?
I tried setting a cookie to store the lang value and access it, but did not manage to update my prop with it.

[@KodapsAcademy]

Yeah when there is an language alternate I create a link to it on the page (with a specific id), and then on the header in a useEffect I detect if there is such an element. If there is not I hide the switch button, if there is I update it with the link

[@crosshorizon]

where to have the source code ? or its in your premium video course?

[@egillanton]

Where is your link to your code in the description?

[@JavohirXasanov-kt6oi]

Can you show the sitemap bruh ? how can you setup sitemap with localization? wait feedback thank you

[@prolland06]

hi, tks a lot you are too good :) where we could fing the source code please ? tks

[@iosonotan1989]

How do you handle a link with the current language?

[@KodapsAcademy]

I've written a utility function that takes the current language, slug and content type and returns the url. My content also references the alternate version of that content so I can use the same utility to switch languages

[@iosonotan1989]

@@KodapsAcademyOh, I see, Thank you so much.

[@juanferrer5885]

Why are you using a json instead of a javascript object?

[@KodapsAcademy]

Because I’m exporting the translations from a third party tool :)

[@arpitabehura4044]

where is the source code pls

[@tuRistst]

Please, show source code :P

[@66batu34]

pls github repo

[@nosirovbehzodjon]

🤕🤯🤯

[@pokelaboratory]

useless

[@ederross]

Bro! Awesome video! Thanks a lot but what is the meaning of doing a tutorial and not providing the source code? 🥹