Next.js App Directory & i18n - Full Tutorial
Vložit
- čas přidán 27. 08. 2024
- To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/... . The first 200 of you will get 20% off Brilliant’s annual premium subscription.
Next.js 13 app router uses server components by default. Adding translations (i18n) to server components can be challenging at first. In this video you will learn how to add i18n to your Next js 13 application using app directory and server components.
Exclusive Next.js tutorials: bit.ly/free-we...
Gitub repo: github.com/tum...
Learn Programming (Skillshare FREE trial): skl.sh/3cYxUP5
Support the channel (tips): bit.ly/3XTXNZu
My courses:
React basics: skl.sh/2XAKn7u
HTML & CSS for beginners: skl.sh/34wvGUH
Draft.js basics: skl.sh/3cJ5Hw4
💻 MY GEAR
MY CODIGN LAPTOP: amzn.to/3MI90ci
MY MOUSE: amzn.to/3mr3no9
MY KEYBOARD: amzn.to/3GIoMjh
MY MICROPHONE: amzn.to/3KCDPfv
MICROPHONE BOOSTER: amzn.to/43trLWB
MY MICROPHONE ARM: amzn.to/3oaf5DW
MY CAMERA: amzn.to/3UxyvyJ
MY STREAMING LIGHT: amzn.to/3KE0PuE
Connect with me:
Website: tuomokankaanpa...
My newsletter: tuomokankaanpa...
Twitter: / tumee
Skillshare: www.skillshare...
#nextjs #i18n #nextjstutorial
This video was sponsored by Brilliant.
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/Tuomo . The first 200 of you will get 20% off Brilliant’s annual premium subscription.
Not gonna lie the hardest part of this is figuring out whether I’m supposed to be using next-intl, react-intl, react-i18n, react-i18next, next-i18next.
It’s a complete mystery. And every tutorial or article recommends a different tool.
There definitely are a lot of choices to choose from!
I usually don't leave messages, but this video is amazing! You have a great way of explaining things that makes it so much easier to understand. Thanks for this video:)
Thank you very much for your comment! Im glad to hear that!
This video is great! I had just about given up on using next-intl but this video made it so clear, thank you!
Great to hear!
Does anyone has the same error? 'Error: Unable to find `next-intl` locale, have you configured the middleware?'
Hi Mr. Tuomo,
Your tutorial on using Next.js for a multi-language website has been a real lifesaver for me. I've learned a lot about using next-intl for fixed content, but I've run into a challenge with dynamic content like user-created posts and comments. I'm not sure how to add them to the locales JSON files, and I've had trouble finding helpful resources on this topic.
I would be really grateful if you could point me in the right direction and maybe even consider creating a tutorial on handling dynamic content within the locales JSON files. Your help would mean a lot to me and others facing similar challenges.
Thank you so much,
thank you for that , but what if i have large website and i want to import each dictionry per page how i this
example
when i m on index page>>only index.json (contain translation) will load
about.tsx -> about.json
will gain more clarity + some proformance as only nessisary translations wil load
second case:
how about translations that stays in most pages (not all) like header and footer lets say i have multiple ...how i translate them and include them
so it will be page translation+ layout
can anyone answer this??
straight to the point! great as always!
Glad to hear you liked it!
Thank you so much, sir! Your video was incredibly helpful ❤🫡. I wanted to mention that if you have an 'api' folder in your project, it is essential to place it outside of the '[local]' folder. Keep up the fantastic work, and thank you again for sharing your knowledge with us!
Thank you for your comment! Cheers!
Excellent tutorial, as always!
Thank you Bradley!
A stable version of next-intl 3.0 was recently released with a lot of changes, maybe you would like to make a video tutorial of it?
Yes, please make a video tutorial for next-intl 3.0.
thank you a lot. that's exactly what i've been looking for
Thank you for the comment and letting me know, that is great to hear!
How can I customize browser urls based on user's locale so that my pages are correctly shared and indexed on google?
Thank you! You have a wonderful English accent! The video was helpful!
Thank you great to hear you liked!
Great video, I wonder is there any way to translate folders (folders which are routes) in nextjs ?
Great tutorial as always. Just a little question. What if I want to use next auth as well. How to write match config for different routes for different scenarios in next auth and intl middleware
How to implement for both client and server component at the same time
Very well and simple explanation, and this vd is amazing . 😊
Thank you!
Ughhh this got soooo complicated and bad with the app directory. It was insanely straightforward with pages directory and next-i18next..
Thanks for the explanations tho :)
Glad if it helped!
Great Explanation thank you!
Glad you enjoyed it!
Great tutorial.
How do you build the app if it has middlewares?
Very helpful to discover the library, however, I find it not sufficient when implementing it to an actual application, navigation and middleware not even mentioned. Thanks
How you change language in metadata?
Is it possible to do it without path, only using cookies in the app router?
guyyy, i love the way you pronounce hook
Haha nice!
Thanks, this video helped me a great deal.
Great to hear!
I implemented next-intl and it has many issues.. it feel not stable.. sometimes it routes to completely different locale and it causes caching not working..
i've tried this but i got this error : error - Error: No intl context found. Have you configured the provider? because of the useLocale
that's because you are using client components, try adding layout file in which you'll wrap children with
locale - from params
messages - awaited import from file system
@@deadinside4820 thanks for ur reply
@@nourrahim5556 i have the same error. did you fix it ?
@@AysuSeyidova-gu9vk i fixed by making my layout server component
if you switch language your page rerendered. how to do without rerender
Is there some specific reason why you want to do it without re-render?
@@TuomoKankaanpaa It shouldn't work like that in general.
In nextjs pages directory switching language not re-rendered page.
@@key-boy That's terrible misinformation.
I'm currently also facing this issue as well, we don't want to lose user's state when changing to another language. I didn't facing it before, when using next-i18next with page folder.
Good video, but how do I use it on the client side?
I have a navbar that includes a 'use client' statement, and I'm trying to import an array containing my navbar data, icons, etc.
However, I'm unable to use it. I also use 'app route', but I've only encountered errors in trying to do so.
Is it not possible to translate the array before sending it back? That is what I'm attempting to do."
looked at the manual but not clear ?
you talked about it as props maybe i missed something.
I fixed it looked at your video again. now i using array in my header build up dynamicly. Thanks for all. You video is very easy to folow and you explain very good. thanks again.
Great tutorial, but how would you handle a scenario where you have to pass in a lot of translations to the client component? Let's say the client component is a form which has labels, error messages, placeholder texts etc. You'd get the translations inside the server component, map them manually into a object and then pass that object as translations to the client component?
i have the same scenario. any tips?
@@christianstamati I ended up wrapping client components in Next-intl provider so that they can user the useTranslation hook. Maybe not the most optimal solution, but it works.
@@christianstamati I ended up wrapping client components in Next-intl provider so that they can use the useTranslations hook. Maybe not the most optimal solution, but it works.
What if we have a client component? It is impossible to think of an app without hooks. What can we do in this case?
Nice job! Thanks for Your effort.
Cheers!
when creating a i18n.js file I get this error
Module '"next-intl/server"' has no exported member 'getRequestConfig'.
in the next-intl/server there is no getRequestConfig method
Your explanations are fantastic. Thank you. However, there is a slight issue. This video is just 7 months old, but so many things changed here since then. Please consider recording another video like this for the new functionality. Your teaching is great.
Great to hear! Thank you for the feedback, I’ll consider that!
I need to pass the language selected to the Accept-Language of header in API.
What is the best practice to change language dependent content coming from APIs without page refresh and calling manually all the APIs?
I am getting the error
Error: No intl context found. Have you configured the provider?
app/[locale]/page.tsx (20:28) @ Home
18 |
19 | export default function Home() {
> 20 | const t = useTranslations('Index');
| ^
Please advice
I got the same error. Have you solved this error yet?
@@jakenemoko i have the same error 😭 did you fix it ?
hey, how do we chain this middleware with the normal middleware that has conditional statements for rewriting a path?
good work bro ! thanks
Cheers!
nice turorial!!!! but how dose work output:"export" in next.config.js for static page?
Vihdoin suomalainen tekee koodi videota
🙌🙌
Getting error - module not found here - import Link from "next-intl/link"
Check that you have installed the dependencies and imported the correct module
Great video, I just want to ask, if I use useTranslations in page.tsx, doesn't everything become a client component? Or is it something different than a classic hook? It confuses me how they have "use" in there, so I want to ask. :)
One more question, do you know how next-intl gets the correct language? Is it just by defaultLang... or does it give preference to maybe location or system language etc?
Thank you this video. That's great
Cheers!
isn't there a way to get directly the full json data ??
Thanks a lot, great video :)
Glad you liked it!
Im using redux and get a 404 after passing the layout, css and page to the [locale] folder, any thouhgts on that? thanks!
I don't want to use the [locale] folder, there's no information on how to do that, its incredibly frustrating!
Love from India ❤
Cheers!
i did everything like u did but i have this isssue
app\[locale]\page.js[locale]/page.js doesn't have a root layout. To fix this error, make sure every page has a root layout.
can u help ne solve this please
Is there a way to use it when my page is an async function?
can we switch the locale without refreshing?
Thank you so much!
Cheers!
Has danger error in next-intl, they don't work with app folder and BASE_URL. If you search in they github issues, has a topic posted there.
What a great video, it helped me a lot!
Now, how can I test if my defaultLocale would work correctly, I already tried to change Chrome's 'sensors' and there was no change, how can I test this?
Thanks glad to hear it! Hmm that's weird, changing the locale in chrome dev tools should do the trick, gotta test it myself again too!
Isn't it much easier just to store a cookie for preferred language, and use one json file that has all the texts in multiple languages and select based on which language is selected.
I mean with this plugin we have to define the texts anyways, also this package adds a tons of other works as well.
Hi, is there a way to translate the metadata?
Thank you!
Cheers!
I followed the steps but i had this error
Unhandled Runtime Error
Error: No intl context found. Have you configured the provider?
Check that the provider is configured correctly! Hope it helps!
Why in change languages, page refreshed?
That's right?
How mange canonical tag in NextJs 13 next-intl
I want to ask which one has better performance i18n or next-intl with server and client side? btw your content helped me alot about app dir make more videos
That's a good question, I'm not actually sure about that! Great to hear that you have liked the content!
not sure but from what I read on documentation from both libraries next-intl is more up-to-date for nextjs 13 and the app dir. Both libraries have a workaround for the appdir but intl is currently developing the support. I think the other ones are too {hacky{ to implement. But you know how it is, in a month all can be different.
Anyone knows how to make Static Site Generation with i18n? I tried everything but nothing works. Actually I don't really understand why something that much important like have a website with SSR and multi language is so hard. Can anyone help me?
i have error when i use layout and import'./global.css' module not fount in [locale]
Make sure your import paths are correct
thank oy i fixed it@@TuomoKankaanpaa
have you tried deploy this project into firebase hosting ? is next export supported now ?
Unfortunately I havent tried that, been deploying to Vercel
What if you have a blog with many posts, are you going to translate each post? Is there a better way to handle blog posts? Thanks
you can use a thirty aplication like google translator, but idealy you should translate each one mannualy
That’s a good question! I’d say it really depends on where you store your posts e.g. If they are on a headless cms, there is a good chance that the cms has some translation options already setup!
Cool video! @TuomoKankaanpaa How do you translate the page's title (browser's tab) that you define using next js metadata?
Great to hear! See this next-intl-docs.vercel.app/docs/next-13/server-components#using-internationalization-outside-of-components for how to use the translations with e.g. page title
Miten hyödynnät tätät DatoCMS kanssa esimerkiksi ?
DatoCMS pystyy lisäämään contenttiin käännökset valmiiks, eli jos lähetät localen niin se osaa antaa oikean käännöksen suoraan
@@TuomoKankaanpaa Eli voin vain käyttää next-intl ilman i18n.ts tiedostoa jossa haetaan käännökset valmiista json tiedostosta.
Toimiiko DatoCMS samalla tavalla kuin Sanity CMS näyttävät ainakin todella samalta.
Kokeilen tuota DatoCMS, sinulla näyttikin olevan siitä video@@TuomoKankaanpaa
What theme are you using?
Aura dark
Useful....
Where is the src folder? Should be there, and you dont have it. All the time this error:
Error: Unable to find `next-intl` locale, have you configured the middleware?`
Next-translate is much better than next-intl.
See ya!
Src folder is optional in next.js, for this one I just didn't use it but all this works with src folder too. About your error, have you placed the middleware file to the correct folder and configured it as in the video?
I wished it was on typescript
Thanks for the feedback! :)
@@TuomoKankaanpaaou did a great job though🎉🎉
Thanks! 😊🙌
wow the time I am watching this is 7 days ago and server component is not on beta anymore since 4 days ago and the doc is changed
For me it still shows server component support is still in beta for next intl 🤔
@@TuomoKankaanpaa I have a big CMS platform so I just created a new workplace in my turborepo to rebuild it in the new way. still need to config it a lot, so far it detects language and redirect the user to that lang, we have a long way to go
you sound very much like Ismo the comedian
Maybe it's the Finnish accent :P
It sucks that you didn't do it in Typescript. Javascript only is completely useless for people who use Typescript and anyone who wants to work on a project professionally should be using Typescript. =\
I couldn't use link from next-intl/link it says it is not available.
You need to create navigation.js
import { createSharedPathnamesNavigation } from "next-intl/navigation";
export const locales = ["en", "fi"];
export const localePrefix = "always"; // Default
export const { Link, redirect, usePathname, useRouter } =
createSharedPathnamesNavigation({ locales, localePrefix });
and then import the Link from the navigation file
Please make a video tutorial for next-intl 3.0.