ฝัง
- เผยแพร่เมื่อ 10 ธ.ค. 2024
- 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/can...
🔗Source:
[next-intl docs] next-intl-docs...
🚀Live:
nextlingo-beta...
#programming
I was looking for a server-side internationalization package for a next.js project. And I found it! Thank you very much!!!
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!
you saved my life more than GPT 4o for sure ... Thanks you
Great video! Probably the best explanation about Internationalization in Nextjs so far
men this is the best explanation that I have been seen
Thanks, I was searching for long for this kind of video
Thanks for this! The official next-intl documentation seemed to have changed regarding the setup for the requests.ts file. Using this older implementation solved my problem :)
bangga ada orang indo, bikin tutorial pake bahasa inggris di web dev
Terimakasih, yuk kita belajar bareng disini 😁
Thanks a lot! Straight forward tut! Learned something nice 👌🏼
the best and only tutorial on youtube
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..
Great video! Helped me a lot. Thanks!
This was so helpful, thanks a lot mate.
Does redirection of homepage affects SEO?
It was very helpful for me.thanks a lot.
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? 🤔
Try to put the src files in the video in your app folder
And organize the files import in i18n and middleware files
@@Falconforex OK，I will give it a try，thank you for the reply ❤
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
bro did you found solution?
@@ashishsubedi1400 nope
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.
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?
I have the same question
Nice tutorial! Could you please add routing. like adding about and contact page. That is giving error
Thank you for this video!
Can you make a video on RTL languages too?
Would be really appreciated.
saved me twice on two different projects 😃
Hello sir, I have one question. Can useTranslations() be used in both server and client component?
No
Hooks can't be used in server side components
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!!!
Whatif I have deeply nested routes? How would the router replace work?
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
Good morning, I followed the video and I would like to add pages to my project, how can I do it?
Great video! thank you vert much!
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?
I have a question why do we need to use next-intl while next js already have i8n already by default , what is the difference ? also another question please do we must create json files for every language to make it work ?
Next.js’s built-in i18n handles only locale-based routing. For example:
const { locale } = useRouter();
{locale === 'en' ? 'Hello' : 'Bonjour'}
yes, you need to create JSON files for each language
@@CandDev I see, thank you so much for this never knew about this until I found this video ❤
Is this package working well with intercepting routes festure?
Moving the layout.tsx to the locale directory, made everything else doesn't work properly in my project
Thanks, But we can not build production it gives error with static and i can not fixt it
what if i don't have src folder.
then use root folder
Nice tutorial thanks! i have a question.... How do i build a header responsive (burger menu , etc) with a "use client " ? or another solution?
what microphone are you usin? Thanks
great , for nested layout : for ex : the third layout i have include header and navbar but not working
thank you sharing code
good work bro
Hi, its better configure the switcher with next router for handle easy way dyn pages
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
😊😉
Thank you very much for the explanation but we are still waiting second part for server side translation
Good stuff, but I hate how you can't use multiple sententences in the namespaces. Basically they can't contain full stops, so you gotta plan around it.
Thanx . Please Answer on my question .... How can make url without en . like instead of localhos/en to be localhost ?
is this available in JS not TS
Bro, I'm crying, is there an option how to do all this for SSG without 100500 crutches?
When you visit the index page '/', it shows 404. How do you solve it?
you should do this code in nextconfig :
module.exports = {
async redirects() {
return [
{
source: '/',
destination: '/redirectRoute',
permanent: true,
},
]
},
}
How to manage multiple middleware with different matcher config ?@Cand DEV
Could you solve it? the same thing happens to me
I'm facing the same problem, I've tried several approaches but nothing seems to work, has anyone figured out how to solve it?
thanks nice tutorial. Can you teach dynamic language structure using Next.js and database? I mean like a multilingual dynamic website
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
Thanks, great idea. I'll consider it for future tutorials
where should i create app directory and which files should i move in it??
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.
Hello Bro. I would like to request a video about redux toolkit. Learning from ur tutorial helps me alot to understand react better.
Didnt next have built in i18n internationalisation?
yes, it does
How to write middleware when joining Next-Auth
YEEEEE same here!
Amazing 🔥🔥
Thanks 🔥
it not working for me even though I floowed the updated doc
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
hello,how to fixed this problem ?
Bang cara agar kalau pindah halaman makek next/link, tetep di bahasa yg di select ?
good video, how can I disable to not see the prefix in the url, it is causing me conflicts with another security dependency.
I've been trying to figure out how to achieve this, but haven't found any good solutions yet
hello,how to Removing the Default Locale ?
Can we set default language without adding /en in the url.
How to use next-intl in client components?
great video
Can you provide us a one with Next14 with clerk , the middleware seems to have a conflict
Hello, were you able to solve it? I need the same
Can you show when we routing like about page
Anyone got a working example of combining next-intl and autjs 5 (beta) in the middleware?
Hello, were you able to do it? I need the same
@@luesmadev Ended up going with Clerk, next-auth seems to be in beta forever. So no, sorry bud
great sir
Thanks very much ❤❤❤❤
Can you make a video using Clerk and Next i18n?
I can do that on my channel
@@joscript7846 Please
orang indonesia ya mas? keren...
iya mas, thank you ya.
Thank you!
soo cool
For not found page:
export const config = {
// Match only internationalized pathnames
// matcher: ['/', '/(ar|en)/:path*']
matcher: '/((?!api|static|.*\\..*|_next).*)'
};
amazing
Bang lu orang indo?
iya bang. jowo tulen bang
You are very cooooooooooooooooooool
Nice
6:37
I Like you really
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.
What’s the solution?
ada indonesia coyyy
dan orang indonesia ini emang ada dimana mana ya. 😁
This video like United Nations - useless!
So basic