DEV Community

Cover image for Building Next.js app in 7 different languages 🇫🇷 🇩🇪🇧🇷 with i18n. Open Source.

Building Next.js app in 7 different languages 🇫🇷 🇩🇪🇧🇷 with i18n. Open Source.

Iuliia Shnai on July 26, 2023

Localisation is one of the ways how to make your project open and accessible for more users. So I decided to add different languages to my app....
Collapse
 
mateusabelli profile image
Mateus Abelli

I like i18n although I don't implement it too often in projects I enjoyed reading your process to add such feature.

I have a question, with this setup, is it possible to have next.js figure out the user's preferred language and automatically render the matching language?

Collapse
 
shnai0 profile image
Iuliia Shnai

Thanks Mateus!

It is actually a good questions. I actually have no idea. I did not build it or did not try. But understand what you mean.

I build just standard always users get on the English page.

Collapse
 
mateusabelli profile image
Mateus Abelli

Oh that's cool, thanks for replying!

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Great stuff here! Love to see you building cool stuff with Next.js.

Collapse
 
shnai0 profile image
Iuliia Shnai

Thanks Juan. Are you building smth at the moment?

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Not anything code related atm. 😅
But building content for folks in SaaS.

Thread Thread
 
shnai0 profile image
Iuliia Shnai

That is great! Which type of content? For website or social?

Thread Thread
 
juanfrank77 profile image
Juan F Gonzalez

Mostly for websites. Blog content that can then be used for social media and to get more organic traffic. 😀

Collapse
 
aydrian profile image
Aydrian

This is great. Where did you source all your translations? I'm also starting to build a lot using i18next.
I also created a i18next Backend Plugin for those who want to store their translations in a database using Prisma ORM.

Collapse
 
shnai0 profile image
Iuliia Shnai

Sourcing is all from ChatGPT:)

Collapse
 
mfts profile image
Marc Seitz

💪 Great job!

Collapse
 
aibryx profile image
Alim Dzhanibekov

+

Collapse
 
aibryx profile image
Alim Dzhanibekov

++

Thread Thread
 
aibryx profile image
Alim Dzhanibekov

+++

Collapse
 
softwaresennin profile image
Mel♾️☁️

Awesome job @shnai0 awesome job indeed!!

with this ... i am seeing that i really need to learn NextJS once i am done with python and done with JS. Wooow ... still got a roads to go.

Collapse
 
shnai0 profile image
Iuliia Shnai

Thanks Lionel!

It seems that it pretty simple language and very clear one.

I don’t know python:) maybe I should also look into it:)

Collapse
 
ldnovaes profile image
Leandro Duarte

AWESOME!

Collapse
 
shnai0 profile image
Iuliia Shnai

Thanks Leandro 😊

Collapse
 
gutem profile image
Gutem

ch == Switzerland (derived from Confoederatio Helvetica)
cn == China

Collapse
 
shnai0 profile image
Iuliia Shnai

Omg

Thank you for noticing that Gutem. I was kind of confident it is like that. Need to push update for it.

Collapse
 
ahmadessam profile image
Ahmad Essam

Nice work

Collapse
 
shnai0 profile image
Iuliia Shnai

Thank you Ahmad!

Collapse
 
tommyleong profile image
TommyLeong

Hello Iuliia. By any chance did you explore how i18n could pull latest translation content from an API? Not just on first launch, but on subsequent navigation or page refresh to always refer to latest translated content from backend.