Internationalization in NextJs 14 with Next-Intl

Internationalization in NextJs 14 with Next-Intl | i18n

Рет қаралды 34,554

4 ай бұрын

In this video, we will explore the implementation of next-intl within the Next.js app router using server components. Additionally, we will demonstrate the creation of a select button in the navbar, allowing users to switch between the English and Indonesian languages.
👨‍💻Code:
[github] github.com/candraKriswinarto/...
🔗Source:
[next-intl docs] next-intl-docs.vercel.app
🚀Live:
nextlingo-beta.vercel.app
#programming

Пікірлер: 87

@xDiagone 2 ай бұрын

The best tutorial for nextjs translations. Literally the only tutorial that worked for me the first time, perfectly explained and fully functional. Thanks a lot!

@SUlutas 2 ай бұрын

I was looking for a server-side internationalization package for a next.js project. And I found it! Thank you very much!!!

@catweb666 3 ай бұрын

Thanks, I was searching for long for this kind of video

@IvoTsochev 2 ай бұрын

Great video! Probably the best explanation about Internationalization in Nextjs so far

@rayusaki88 26 күн бұрын

Thanks a lot! Straight forward tut! Learned something nice 👌🏼

@ExtraMad0 2 ай бұрын

men this is the best explanation that I have been seen

@marcoB0815 2 ай бұрын

Great video! Helped me a lot. Thanks!

@osvaldoaguilalafont5052 21 күн бұрын

the best and only tutorial on youtube

@hosseinjafari2896 Ай бұрын

It was very helpful for me.thanks a lot.

@Tommy-jn9ps 3 ай бұрын

what microphone are you usin? Thanks

@ThisIsLiving__ 18 күн бұрын

saved me twice on two different projects 😃

@eliuddyn 26 күн бұрын

Amazing 🔥🔥

@CandDev 4 күн бұрын

Thanks 🔥

@aldotugasumb2366 Күн бұрын

soo cool

@germancardosodesousa5183 Ай бұрын

Great video! I have a question, how could i do if i want to add another router, like app/bio/page.tsx ... I have to put it into my [locale] folder, or into app folder? Thanks!!!

@user-yy9vr7pc1i 4 ай бұрын

So really nice tutorial dude. I have a question, is there any way to make the same with "PAGES ROUTER"?...It's because I realized that you set the language very well. And when you navigate back, it not return to last language route "/en" or route by default , it quit from the apliccations really well, and I want to achieve that behaviour. Hope your advice, Thanks a lot.

@Jeridi 18 күн бұрын

amazing

@user-yn9yr8hq8v 2 ай бұрын

Thanks very much ❤❤❤❤

@mamlzy 4 ай бұрын

bangga ada orang indo, bikin tutorial pake bahasa inggris di web dev

@CandDev 4 ай бұрын

Terimakasih, yuk kita belajar bareng disini 😁

@user-rv1bx8hx4v Ай бұрын

Thank you!

@YTthings666 Ай бұрын

Nice tutorial thanks! i have a question.... How do i build a header responsive (burger menu , etc) with a "use client " ? or another solution?

@rokkazmvm 16 күн бұрын

Hey, is there a way to have one language(lets say english) not have any prefix by default? And others have like shown on video?

@mohdsahil226 4 ай бұрын

Nice tutorial! Could you please add routing. like adding about and contact page. That is giving error

@omarrayes2281 2 ай бұрын

Thanx . Please Answer on my question .... How can make url without en . like instead of localhos/en to be localhost ?

@pierosabino 2 ай бұрын

Good morning, I followed the video and I would like to add pages to my project, how can I do it?

@husseinoklah8839 2 ай бұрын

Thank you very much for the explanation but we are still waiting second part for server side translation

@user-mq2qb6ry1f 2 ай бұрын

Nice

@sengwatrongrat1630 3 ай бұрын

Hello sir, I have one question. Can useTranslations() be used in both server and client component?

@moussaibrahem9 16 күн бұрын

No Hooks can't be used in server side components

@razvlekashka 10 күн бұрын

Does redirection of homepage affects SEO?

@pontingIndia 3 ай бұрын

Can we set default language without adding /en in the url.

@capK29 3 ай бұрын

Hello Bro. I would like to request a video about redux toolkit. Learning from ur tutorial helps me alot to understand react better.

@niconel7659 2 ай бұрын

Anyone got a working example of combining next-intl and autjs 5 (beta) in the middleware?

@helloWorldPlus 2 ай бұрын

Hello, Which would be the importance of selecting yes for the src directory? How would be the process if I have the app with no src directory?

@rosmildolopes3985 2 ай бұрын

I have the same question

@iPankBMW 3 ай бұрын

But its so slow with next-intl.... On each page request the page fetches the correct translations for like 0.2seconds... Either we block whole page render till translations are done or wrap translated parts in suspense which adds a lot of code + comlexity..

@qigongzhu2733 Ай бұрын

Can you provide us a one with Next14 with clerk , the middleware seems to have a conflict

@pamphilemkp 4 ай бұрын

Nice tutorial though, thank you so much but sir Could you please create a second video with the app router (without the SRC) in nextjs i have tried to implement the same thing but i got some issues, please kindly create a second video i have existing app router projects that i will need to implement the translation this only works for the SRC, best regards 😊😉

@divyarajsinhrana6045 2 ай бұрын

How to manage multiple middleware with different matcher config ?@Cand DEV

@maskman4821 4 ай бұрын

Sir, I have tried to implement next-intl, the only thing different is that I don't have src folder, I have app folder under root directory, I have followed the video and your github and it always led to not-found page, is there a way to get around src folder? 🤔

@Falconforex 4 ай бұрын

Try to put the src files in the video in your app folder And organize the files import in i18n and middleware files

@maskman4821 4 ай бұрын

@@Falconforex OK，I will give it a try，thank you for the reply ❤

@pamphilemkp 4 ай бұрын

i don't think it is a good idea, we have existing projects with the app router and we need to know how we can implement the translation on it@@Falconforex , i have also faced this issue

@ashishsubedi1400 2 ай бұрын

bro did you found solution?

@maskman4821 2 ай бұрын

@@ashishsubedi1400 nope

@ahmedadawy8149 2 ай бұрын

You are very cooooooooooooooooooool

@user-kb6ck7gb6f 2 ай бұрын

Moving the layout.tsx to the locale directory, made everything else doesn't work properly in my project

@twanabrno875 Ай бұрын

Thanks, But we can not build production it gives error with static and i can not fixt it

@juanebertaypeescobar3482 4 ай бұрын

good video, how can I disable to not see the prefix in the url, it is causing me conflicts with another security dependency.

@gustavenzi 4 ай бұрын

I've been trying to figure out how to achieve this, but haven't found any good solutions yet

@ahmedadawy8149 Ай бұрын

I Like you really

@Happycat-xd8rw 2 ай бұрын

Bang cara agar kalau pindah halaman makek next/link, tetep di bahasa yg di select ?

@murazaslan3631 Ай бұрын

hello,how to Removing the Default Locale ?

@amcheachamroeun2716 2 ай бұрын

Can you show when we routing like about page

@fatih9508 4 ай бұрын

thanks nice tutorial. Can you teach dynamic language structure using Next.js and database? I mean like a multilingual dynamic website

@ismaeltinta6118 4 ай бұрын

exactly. I wanted to ask the same! I have a marketplace project for multi-country and I assume it's going to be messy when i reach the implementation of internalization and localization feature

@CandDev 4 ай бұрын

Thanks, great idea. I'll consider it for future tutorials

@mouad3599 3 ай бұрын

is this available in JS not TS

@sandrotabatadze3768 3 ай бұрын

where should i create app directory and which files should i move in it??

@me.akaaba 2 ай бұрын

app directory is automatically created for you when you create your next app with create-next-app, it will be in src folder if you choose src during creation. otherwise in root directory if you choose to discard src during the create-next-app terminal commands.

@naolfekadu6101 25 күн бұрын

Whatif I have deeply nested routes? How would the router replace work?

@user-lh8lf9cm1x 23 күн бұрын

I am wondering the samething... I thought about asking chatGPT to create a function to detect the current URL path like I dont know localhost:4000/en/dashboard?userId=xjhf123fd09dslkj2123123 and the function could get a string "es | de | en" and inside that function and replace the current url param but replace the "en" for "es" or "de" on the current path for the string coming from the function.. It could be a function that could be called from anywhere and be placed inside of "src/utils/" or I'm full of bad practices haha I'm just a junior doing things for 1st time

@JavohirXasanov-kt6oi 3 ай бұрын

bruh can you create localization without sub-path or any routing like: /en or smth so can you provide how to create sitemap with next-intl thank you

@murazaslan3631 Ай бұрын

hello,how to fixed this problem ?

@jy1772 4 ай бұрын

When you visit the index page '/', it shows 404. How do you solve it?

@ariyansalari270 3 ай бұрын

you should do this code in nextconfig : module.exports = { async redirects() { return [ { source: '/', destination: '/redirectRoute', permanent: true, }, ] }, }

@user-gh3uo3om9g 3 ай бұрын

what if i don't have src folder.

@jaspreetmaan121 2 ай бұрын

then use root folder

@lucaseitel98 2 ай бұрын

Didnt next have built in i18n internationalisation?

@3litepker Ай бұрын

yes, it does

@Mark-lg2qe 3 ай бұрын

How to write middleware when joining Next-Auth

@codingspot 3 ай бұрын

YEEEEE same here!

@AhmedKhaled-mw9rs 4 ай бұрын

For not found page: export const config = { // Match only internationalized pathnames // matcher: ['/', '/(ar|en)/:path*'] matcher: '/((?!api|static|.*\\..*|_next).*)' };

@caioalves8319 4 ай бұрын

Can you make a video using Clerk and Next i18n?

@joscript7846 4 ай бұрын

I can do that on my channel

@caioalves8319 4 ай бұрын

@@joscript7846 Please

@tuananhdo1870 2 ай бұрын

6:37

@Aufafkri Ай бұрын

Bang lu orang indo?

@CandDev 29 күн бұрын

iya bang. jowo tulen bang

@user-xz8dh1jc5d 4 ай бұрын

ada indonesia coyyy

@CandDev 4 ай бұрын

dan orang indonesia ini emang ada dimana mana ya. 😁

@bernardukiii 2 ай бұрын

BEWARE: next-intl does NOT support 'complex' data structures. It will not let you iterate over a list for example. Not even using its useFormatter() hook.

@3litepker 2 ай бұрын

What’s the solution?