Thanks for the work! For me personally, it is not ideal that you don't write but only show the code, that does not help me understand how things work together. You only explaining the code sure helps, but it leads to you leaving out quite a few things (parts of the code and structure) that I just copy paste. Sure, I can figure it out myself, but that sort of beats the purpose of a video like this. Just my opinion, but other people seem to like that style...
I have been struggling to piece all these concepts together onto my app, but the way you structure the video with an initial overview of the code and then its implementation is amazing!
Thanks, this is the perfect content to explain the internationalization in the NextJS app directory. The problem that I still have is you have to pass the "lng" string from parent to children in all components. It will be hard to handle If you have a large-scale application. so far, I didn't find a way to fix this problem
Hey Hamed, i never found a solution for the following. Is it possible to re-direct to the default path (for example /en) without even using it. So /en would be the default (wihout showing that route) and you would only show /de for the alternative pages?
This is an awesome video. But I'm running into an issue when trying to add light mode/dark mode. for some reason I can't get it to work! Wondering if you have any suggestions.
Yes, I'm getting this error: server error TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. This error happened while generating the page. Any console logs will be displayed in the terminal window. it points to the next-themes folder in my node modules. @@hamedbahram
RUclips keeps deleting my comments, I'm getting this error: server error createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. This error happened while generating the page. Any console logs will be displayed in the terminal window. it points to the next-themes folder in my node modules. I tired added the use client directive to the particular file, but it didn't work... Using shadcn ui BTW
@@hamedbahram I actually figure out the issue. Once upgrading to next 14, adding the 'use client' directive to the file fixed the issue. Not totally sure about the implications of directly editing a node module file are, but it seems to work for now!
@@ZacharyStout-o5n You're not supposed to edit the package in the node_modules folder, instead you have to add the `use clinet` directive on the component you are using the `themeProvider`. Watch this video where I explain this pattern → ruclips.net/video/RTAJ-enfums/видео.html
Hello! Its super cool, but how to use getDictionary in server or client components without passing lang prop into components? How to avoid prop drilling, especially when we have deep nested components? Should we store lang into state management?
Another question! :D Thanks to your help, I've managed to make it work nicely, even with mixing with an auth middleware. If find the logic very beginner friendly and you approach nice ad clear. There is one point you don't point out: the next-intl and next-international libraries allows the use of plurals, genders, ... in the dictionaries object allowing something like that: { "static": "Hello world!", "interpolation": "Hello {name}!", "plural": "You have {numMessages, plural, =0 {no messages} =1 {one message} other {# messages}}.", "select": "{gender, select, female {She} male {He} other {They}} is online.", "selectordinal": "It's your {year, selectordinal, one {#st} two {#nd} few {#rd} other {#th}} birthday!", "escaped": "Escape curly braces with single quotes (e.g. '{name'})" } What would be the equivalent for your getDictionary method? At the moment I use a t.interpolation.replace('{name}', name) but I don't know how to make it work for the "plural", "select", ... Any chance this could work?
Hey! good question. you can still use those libraries. The `next-int` has stable support for client components and a beta version for server components.
@@hamedbahram yes I've checked it out but your solution gets rid of the LocaleProvider (which is why it is such a beginner's friendly approach). And the providers fron next-intl... Not so much :D
Pass down the translations as props to client components or share them via global state. I'll make a video on this since a lot of folks have asked for it.
Hi, thank you so much for your video. It was really helpful. Could you please suggest the best way to retrieve page labels on the client side? Should I pass labels from parent to child?
Glad to hear that. Yes you can pass it as props or use the `use` hook to retrieve the translation object in client components directly or share it via context. Watch this video → ruclips.net/video/oMvW3A_IRsY/видео.html
@@hamedbahram Yeah, but useing state to store translations does not seem to be a good practice, I gues I will use next-intl and use a custom function to get server side translations.
I should no matter how many languages you have. Check your i18n config, actual json dictionaries, and the `getDictionaries` function to include the third locale.
hi thanks for this tutorial. can I use this also if I want a dictionary folder or translation folder inside of a component on a app/route/_component library? for better organization?
@@hamedbahramThanks! Is it normal that all my app is re rednered whenever i change the language ? Also, I belive there is an issue with the exclusion with the favicon.ico in the matcher because i get a server side error whenever i change page saying : Error loading dictionary for locale "favicon.ico": TypeError: dictionaries[locale] is not a function
Great video! Finally someone who explained it normally and I understood it. I just have a question, can we somehow catch an error if I select for example a German language and there is no translation for a certain section? The app crashes like that, so if there is some way to handle it, so that the default translation (en) is used and the app doesn't crash. Of course it could be checked in every single file to see if it exists, but that seems stupid to me. Thanks!
And then another question. If I pass translation props to the client component, I have to type them all through typescript. It is annoying if I have a bigger translation to put in, so I have to do it this way? Can't I do it differently and better so I don't have to write it all by hand?
Glad you enjoyed it! To you tailwind for RTL languages, you can check the `lang` parameter in your root layout and add the `dir="rtl"` attribute to your html tag, which then enables you to use the `rtl:` and `ltr:` modifiers in tailwind. You can read more about it here => tailwindcss.com/docs/hover-focus-and-other-states#rtl-support
First of all, thanks for the solution! But I need to ask: Have you ever tryed to put an image on /public and return it using ? This solution seems to force the path to the /en for example, and the images does not load...
Good question! You can copy all your images into an `images` folder inside the `public` folder and then exclude the `images` folder from running the middleware inside the config matcher like ↓ ``` export const config = { matcher: ['/((?!api|_next/static|_next/image|favicon.ico|images).*)'] } ```
@@hamedbahram Heey thanks for the response ;) Do you think I can make a blog post for it? I'm starting a blog full based on solutions and value, would be cool if I could mention your project :D
Thanks.I hava a query, I am getting the translation from separate backend API, like the key for english version is the name while translation is name_2; for example receiving the users list from API, [{user:{location:'english-name',location_2:'translated-name'}] and same like for other properties like city and city_2 as keys for english and translated version respectively. Do I still need dictionaries as I am getting the translation from backend and can I reuse the same component because for name I need to show {user.name} but if the language is other(Arabic), then {user.name_2},
How would you approach the topic of i18n if your locale was not stored in your URL, but rather in your user settings, which would be fetched on app load ?
@@pot42 I thought you want to read the user preference from your DB instead of the request headers. If you want to implement a different route structure, then you'd need to have dynamic pages that have request specific logic to render content in different languages.
Hi Hamed I implemented internationalization in my project using Page to pass the lang property to the child components. However, with many child components, the chain of steps to pass the dictionary through the props becomes complicated. Is there any way to import the dictionary directly from Page child components using SSG? I would appreciate your help!
Hi Mariel! You can share the dictionary with React context or a global state management like Zustand. Hope this helps. I may create a video on this since it's been asked a lot :)
@@marieltorres2873 For server components you can call the `getDictionary` function directly to get the dictionary. For client components you can pass the translation through props or share via global state. Does this answer your question?
@@hamedbahram I'm facing the same issue. in this case how a server-side component can know which is the current language since only page level components get the current language as a prop?
Thanks for your video! I could implement i18n in SSG mode using nextjs 13 app router. But one suggestion - can we omit default language(en) in the router?
thanks for teh tutorial. One question though: with the locale, the error and 404 pages reverted to the nextjs ones instead of using mine. how can I force them?
Essentially the issue is that automatic redirects to not-found do not work inside of a dynamic segment like [lang]. So you need to use a catch-all that calls notFound(). You will need: 1. Catch all component: [...not_found]/page.tsx 2. Not found page: not-found.tsx ``` // [...not_found]/page.tsx import { notFound } from 'next/navigation'; export default function NotFoundCatchAll() { notFound(); } ``` Another problem is that inside of your not-found page you will not have access to page params. So you cannot access the locale from page params. You can instead set a custom header in your middleware if you want to localize this not-found page. ``` // not-found.tsx import { headers } from 'next/headers' export default async function NotFound() { const headersList = headers() const locale = headersList.get('x-i18n-locale') || 'en' ... } ```
Thank you so much for this content. I’m encountering a problem where the act of switching languages (which consequently alters the locale in the URL) is causing interference with the functionality of the browser’s back button. My aim is to guarantee that when the back button is clicked, it directs the user to the preceding page, irrespective of any changes in language. Is there a method to accomplish this?
Thanks for the good explaination... I'm still beginner in Localization... How can I use the dictionary in client components correctly my project code is like this toast.error(t('toast.error.users.invalid_invite')); using useTranslation hook
Share the translation via global state or pass the scope as props to the client component. But it's best to leave the client component only to the ones that need user interactivity.
You can check the `lang` parameter in your root layout and add the `dir="rtl"` attribute to your html tag, which then enables you to use the `rtl:` and `ltr:` modifiers in tailwind.
Hi thanks for your video I've been using this translation for some time but there's one problem I'm struggling with. What if I'd like to change only one word from json to be bold or change his color. I remember while using useTranslation in react only need to wrap it by bold selector in json and then just use to make it work
Good question! You can copy all your images into an `images` folder inside the `public` folder and then exclude the `images` folder from running the middleware inside the config matcher like ↓ ``` export const config = { matcher: ['/((?!api|_next/static|_next/image|favicon.ico|images).*)'] } ```
We created a lang inside the application folder and did everything inside it, but how do we use the not found file in this situation? How can I make the contents of the not found file to be included in the layout inside the lang folder?
The detail is when I destructure the Header and create the Navbar, when I place the Navbar inside the Header everything is fine, the problem occurs when I pass the Header to the layout.tsx, it generates an error in the Line where I pass the Header < Header lang = { params.lang } />. with that additional component, it would go one file behind and I don't know what I should call it in the layout
Great video, thank you! the only downside is that when switching to a different language, the redirect can possibly cause data lost for unsaved data in the current page. how can I maybe add a warning modal or something similar to let the user know before actually redirecting?
I switched the Link buttons to a select input and used the onChange property and redirect() method from next/navigation. it does the trick. thank you man@@hamedbahram
Nice explanation !! I have a doubt ,if we add the language inside our project in json file is it affect the SEO ? ,for my current project SEO is very important is it affect indexing the page from google crawler when we change the language ?
Nah not really the JSON file remains on the server, and you're pages would be content on the client. You can also use the `generateStaticParams` function to statically build your pages at build time.
Hi Hamed, thank you so much for your videos! I'm having some trouble trying to set span tags within text from dictionaries. Is there any way to implement them? Thanks in advance 🙏🏼
Yeah, that's what I think too 😅 But if I need to store, for instance, a blog post entry that has bold, italics... What would be the proper way to do it?
Bro i found one bug in this approach trying to add Image to your project will not work if the image exist in the public folder example : public --- image1.jpg it will break any fix ?
Good question, two ways you can go about this, firstly, if you are serving up the image from your public folder its better to statically import your image in any component using it so NextJs would serve it from your `_next/static` folder which is excluded from the i18n middleware. Secondly you can move all your static images into a folder (e.g ./public/images/...) and exclude that folder from the middleware using the config matcher.
You can pass the required translation scope to the client component as props. Alternatively you can use the `use` hook to get the entire translation. See this video → ruclips.net/video/oMvW3A_IRsY/видео.html
Hello so and so, I was trying to remove the Nav from the Header in a new component, but Typescrscript gives me an error in the layout and another thing I am trying to do is change the language buttons inside the locale-switcher, to place the flag And I haven't been able to get it to be a dropdown menu either, could you give me some suggestions or do you know any tutorial for it?
You'd need a client component for a dropdown and that's probably the error you're getting. You can add the `use client` directive in the beginning of the file.
@@hamedbahram In the Header I bring the Navbar () and assign it the 'use client', and I pass the props to the Header ({ params }: { params: { lang: Locale } }) , and then in the layout.tsx I pass the Header above the children , but it gives me the following error: "message": "Type '{ lang: "en" | "es" | "pt" | "de"; }' is not assignable to type 'IntrinsicAttributes & { params: { lang: "en" | "es" | "pt" | "de"; }; }'. Property 'lang' does not exist on type 'IntrinsicAttributes & { params: { lang: "en" | "es" | "pt" | "de"; }; }'.", install the dropdown menu and the option for the flags in locale-switcher.tsx, I'm trying to do it right now
Is there a way to access the translations in client components? Currently I get the error message that the dictionary.ts file is 'server-only'. Should I just pass the translations as props?
I have a question. I was make link constant that contain array that have href and label. The label it was key of my translation that store in json file of the translation like you show. When I loop through my links I don’t know how to dynamic the translation when it is de structure from getDictionaries. In example: en.json { “home”: “ HOME”, “about”: “ABOUT” } Links const links = [ { href: “home”, label: “home”, }, { href: “about”, label: “about” } ]
Thanks for sharing! Spent quite a lot of time to configure i18n in my project and get some ideas from your video. Just have one more question: how would you organize singular/plural keys inside of dictionary in this type of keys getting? :) And also how would you separate this dictionary files in case of much bigger amout of keys?
Good question! I'd have to look into the singular/plural keys, but for the JSON files, you can have multiple files and merge them together before reading from them. Keep in mind that all these files remain on the server and won't be sent to the client.
@@hamedbahramthanks for the answer:) Well i'm still struggling with all this stuff. I'd like to make something universal to be able use messages on server, and on client if needed. And specially to be able use dynamic values in this messages, including pluralization.
@@hamedbahram let's say we want to pass dynamically a string "2 tasks remain". This number will come from DB, and we should handle pluralization (1 task, 2 tasks... In different languages). So using for example next-intl it would be like string in json (or js) "{count} {count, plural, =0 {tasks} =1 {task} other {# tasks}}". It doesn't look very flexible. I made a helper to generate this options. But still not very sure that it will work on server and on a client component. The most difficult thing in this is to get translation function ( like t = useTranslations(); t(tasks.remain, {count: 2}) ). And also the local should come from env and should not be in url:) Well, i'd say that i resolve all of this but will be very grateful if you could maybe make a video with many different cases, to dive deeper in this topic. By the way i found that next-intl doc is not very correct sometimes. For example, there is a case using useMessages in async component (next-intl-docs.vercel.app/docs/environments/server-client-components#option-4-providing-all-messages), but i'm getting an error like "useMessages can not be used in async components" :)
what happens when we have content in the database? Currently Im follow this pattern for the UI, and getting the DB content dynamically, by reading the lang param in url I show one field or another in DB. But not sure if ths the way to do it.
I'm a bit confused about the error.tsx page. Currently I've created a folder named [...rest] to handle all the invalid paths but as the error.tsx is client side component, it is showing me error. Do you have any sample project or can you update the existing with a not found page, please?
Hi, good job, thanks! But I have several components in depth and it is very inconvenient to pass props "lang". If I create a context, it affects performance and the components must be client component. What is your opinion? And is it better to connect the library "next-international"??
That's right you need to either pass props or provide a context to share the dictionary. There are no right or wrong answers here, you'd have to see what works better for your project. Haven't used the `next-international` package in the App router yet, but if you need the extra functionality that comes with these packages, you can use it. The `next-intl` package is also another one.
@hamedbahram, if I throw "translation" into redax state, then to get data from there, I need all the components that receive redax state to be client-side? what do you think
I have a question. I downloaded the Git repository to try and use it. The next folder contains all the exported files, but it's using 7MB. Isn't that high for only 2 static pages? I don't understand why the weight is so high.
That's actually pretty small for a typical NextJs app. This folder contains all you server and client code, dependencies, as well as static assets. This is not similar to a static export
@@hamedbahram yes, I've tested the code. I need to add something more to export it statically. However, if I export it with an "out" folder, I can't use the middleware for the index redirection. The pages work, but the index returns a 404 error. Do you know how to do the same thing with static generation only? Or what could I do since I need to create a website with two languages, but it doesn't have functions, only static content? Best regards, and thank you very much.
amazing as always! I enjoyed your flow and fluency and you made the topic very interesting and easy to understand. The mood of the video is also very upbeat and fun. I appreciate your hard work! a question, how can we add support for right to left languages like persian to this app with tailwind CSS?
Glad you enjoyed it! To you tailwind for RTL languages, you can check the `lang` parameter in your root layout and add the `dir="rtl"` attribute to your html tag, which then enables you to use the `rtl:` and `ltr:` modifiers in tailwind. You can read more about it here => tailwindcss.com/docs/hover-focus-and-other-states#rtl-support
Thank youu very much Sir, I'm learning a lot from your videos ❤ I have a question, is it possible to get translated content using a loop, in case we will translate a navigation menu?
@@hamedbahram hey sir, i've config the exact same code as you and it works. however it doesn't have metadata in the root url can u check that and give me some solutions how to have metadata even in the root url.
@@MinhNguyen-ft6iv It does have a title tag and meta description tag in the root layout. You can check the deployed version here => next-i18n-ten.vercel.app/en
@@hamedbahram yes but only when your url has '/en' or '/[lang]' , without the [lang] path in the url it doesn't have the metadata. You could see it in your app vercel deploy - opengraph. Just the same problem as I am facing
for example, i have this ReactNode: Front-end developer for over 4 years focusing on ReactJs and NextJs., how do i do it this way? or the only way is put in that way and when i pass in the component i make an split in string ?
@@hamedbahram The problem is this: I have some texts that have elements in the middle, how can I make these elements not just a string? example: return( Front-end developer for over 4 years focusing on ReactJs and NextJs. ) If I used internalization as you configured it, what would it be like to pass the tag?
@@hamedbahram was thinking of making api route that read the local json and basic page to make crud operations , even for multi files json namespaces would love to see a vedio about it (everything in same next js app) but the route work only in dev version not production
Hi. Thanks for the great video. I've got a problem after implementing internationalization: Google can't index it, says - Failed: Server error (5xx). Any ideas on how this can be fixed?
Well technically your pages will be static and visible to google, so I'm not sure what's happening there. The 500 error might be something that's failing in your middleware.
Yes, all my pages are visible. Except the root “/“. It redirects to /en and for google it’s seem to be unavailable. The solution here can be is to get rid of ‘en’ translation and make it default without /en
@@filipploss With the implementation in this example, we can't remove the `en` since all pages live inside the `[lang]` dynamic segment. But I'm not sure why the root is not available to Google in the first place!
The `server-only` is a React package you can use on any module that is only meant to run on the server. It will give you a build error if you ever import anything from that module into a client component. It's just a guardrail to make sure your server code stays on the server.
@@asemkakhi3284 It has nothing to do with `user server`. The `use server` directive is for creating server actions. The `server-only` package is something you can use anywhere in your server code to protect it from being used in client-side.
Is there a way this could work without any routing or domain change? I feel the ideal would be to just support different languages in any given page regardless of links or domains, like the Facebook website does it for example
is there any approach in which we don't change the Url and save the language in local storage or cookies and then make a button on that button click we change the language ?
Take New York Times as an example, do they utilize internationalization? when you click on Espanol or Chinese, it seems everything changes drastically. Do you they rebuild everything under new domain? does that count as a form of internationalization?
@@hamedbahram Thank you. I just searched up a few multilingual websites. most websites which use subpath, seem to have the same layout when you switch language. About the content whether it's a blog or product, do we have to create multiple versions of the content in database/CMS? What is the best approach to store them, do we need to create a separate table for each language?
I can't call the getDictionary function because it says 'use client' at the top. When I delete the 'use client' text, errors appear in other places. How can I fix this?
How about doing routing whitout that middleware file? I'm trying to build a static app with i18n, but for some reason I can't redirect the user to another file when i'ts trying to access the root file, so it gives the 404 error.
@Hamed Bahram what about in a situation where a developer uses 'use client' flag in the rootLayout , how do one intend to use export async function generateStaticParams() { return i18n.locales.map(locale => ({ lang: locale })) } in this cas, because sure 'use client' is needed to use useState in the RootLayout if there is need for it
Instead of adding the `use client` to the root layout, you should move the interactive logic that requires React state to a client component down in the tree.
Hi guys , i followed the tutorial and i'am about to deploy my app. i face issue because i dont. have any index.html file but fr.html and en.html instead. i'd. like some help to fix my issue
it seems the nextJS 13 internationalization is ugly without npm packages. I actually do not use server components. I will continue to try and find a way to implement it without supporting server components.
I'd have to create a part II video on that since a lot of folks have asked me. In the mean time you can pass the translation down as props or share via React context.
Thanks for the work! For me personally, it is not ideal that you don't write but only show the code, that does not help me understand how things work together. You only explaining the code sure helps, but it leads to you leaving out quite a few things (parts of the code and structure) that I just copy paste. Sure, I can figure it out myself, but that sort of beats the purpose of a video like this. Just my opinion, but other people seem to like that style...
Thanks for sharing your feedback. I get it and will have it in mind for future videos.
I have been struggling to piece all these concepts together onto my app, but the way you structure the video with an initial overview of the code and then its implementation is amazing!
Glad it was helpful! I appreciate your comment.
Man! I am so happy I’ve found your channel. I love the way you explain topics and covering server components just makes my work easier. Thanks🙏🏼
I'm glad to hear that man! Appreciate your comment!
Thank you Hamed so much! Excellent step by step explanation. That's just what I've needed. Liked and subscribed.
My pleasure! Thanks for the sub!
Thank you. I have tried other internationalization videos too but this video worked the best for me at the end!
Glad to hear that Ilayda!
the way you structure your videos and follow the documentation is fabulous
Appreciate it! Glad you think so!
Thanks, this is the perfect content to explain the internationalization in the NextJS app directory. The problem that I still have is you have to pass the "lng" string from parent to children in all components. It will be hard to handle If you have a large-scale application. so far, I didn't find a way to fix this problem
Glad it was helpful.
You're doing amazing.Keep up the good work.
Thank you!
Amazing tutorial. I log in just to thank you. Thanks a lot!
You're welcome! Great to hear that.
Thanks man!
I used this implementation and it's working like flash.
Glad it helped!
Thank you. You are a lifesaver what an amazing content.
You're welcome! I appreciate that!
right on time, as i am about to implement this feature.
Awesome! Hope this helps 🚀
Thanks, Helped me a lot to complete my project
Glad it helped!
Thank you, this was so helpful!
Glad to hear that!
Thank you! It really helped with the current project
Great to hear that!
Great job! Thanks a lot for the detailed and clear explanation of internationalization in Next 13. Made my current landing bilingual with this video!
Glad to hear that, Anna!
Lets gooo! I was waiting for this one! Awesome content as always!
There you have it, Juan! I appreciate that.
Clear explanation, thanks
Glad it was helpful!
Thanks, man! It's very useful and convenient
Glad it helped!
Thanks a lot for this video!
You're welcome! Glad you found it helpful.
Thank you a million, that was so helpful!
Glad it helped!
I was waiting for this one for a while…thank you dude, your work rocks…🎉🎉🎉
My pleasure! I appreciate your comment 🙏🏽
You are helping me a lot. Thx :)
Glad to hear that!
thanks for this great video
My pleasure!
Hey Hamed, i never found a solution for the following. Is it possible to re-direct to the default path (for example /en) without even using it. So /en would be the default (wihout showing that route) and you would only show /de for the alternative pages?
That's right, with the dynamic `[lang]` segment, we need to have the locale in the URL even for the default `en`.
This is an awesome video. But I'm running into an issue when trying to add light mode/dark mode. for some reason I can't get it to work! Wondering if you have any suggestions.
Hmm 🤔 I wonder why that is... Are you getting any errors?
Yes, I'm getting this error:
server error
TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
it points to the next-themes folder in my node modules.
@@hamedbahram
RUclips keeps deleting my comments, I'm getting this error:
server error
createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
it points to the next-themes folder in my node modules.
I tired added the use client directive to the particular file, but it didn't work... Using shadcn ui BTW
@@hamedbahram I actually figure out the issue. Once upgrading to next 14, adding the 'use client' directive to the file fixed the issue. Not totally sure about the implications of directly editing a node module file are, but it seems to work for now!
@@ZacharyStout-o5n You're not supposed to edit the package in the node_modules folder, instead you have to add the `use clinet` directive on the component you are using the `themeProvider`. Watch this video where I explain this pattern → ruclips.net/video/RTAJ-enfums/видео.html
Hello! Its super cool, but how to use getDictionary in server or client components without passing lang prop into components? How to avoid prop drilling, especially when we have deep nested components? Should we store lang into state management?
Yes a global state management can be the solution.
Great video! I just have one question about routering. When user hit "/" path. How Could I redirect him base of default language ? Thanks
Watch this video → ruclips.net/video/1S7yFzU2ulg/видео.html
Another question! :D
Thanks to your help, I've managed to make it work nicely, even with mixing with an auth middleware. If find the logic very beginner friendly and you approach nice ad clear.
There is one point you don't point out:
the next-intl and next-international libraries allows the use of plurals, genders, ... in the dictionaries object allowing something like that:
{
"static": "Hello world!",
"interpolation": "Hello {name}!",
"plural": "You have {numMessages, plural, =0 {no messages} =1 {one message} other {# messages}}.",
"select": "{gender, select, female {She} male {He} other {They}} is online.",
"selectordinal": "It's your {year, selectordinal, one {#st} two {#nd} few {#rd} other {#th}} birthday!",
"escaped": "Escape curly braces with single quotes (e.g. '{name'})"
}
What would be the equivalent for your getDictionary method?
At the moment I use a t.interpolation.replace('{name}', name) but I don't know how to make it work for the "plural", "select", ... Any chance this could work?
Hey! good question. you can still use those libraries. The `next-int` has stable support for client components and a beta version for server components.
@@hamedbahram yes I've checked it out but your solution gets rid of the LocaleProvider (which is why it is such a beginner's friendly approach).
And the providers fron next-intl... Not so much :D
@@Neruu2-g3g that's right!
thanks for the video , but what about the client components ? how can we implement this in it ? can anyone help please :/
Pass down the translations as props to client components or share them via global state. I'll make a video on this since a lot of folks have asked for it.
@@hamedbahram thank you so much we can't wait for the video ❤
Thank you so much!
Glad it helped!
Great work mate! Your stuff is very usefull. Keep it going! 🎉🎉🎉
Glad to hear that! I appreciate it mate 🙂
Very, very good!
Thank you! Cheers!
Hi, thank you so much for your video. It was really helpful. Could you please suggest the best way to retrieve page labels on the client side? Should I pass labels from parent to child?
Glad to hear that. Yes you can pass it as props or use the `use` hook to retrieve the translation object in client components directly or share it via context. Watch this video → ruclips.net/video/oMvW3A_IRsY/видео.html
@@hamedbahram Thank you so much for your reply
@@ShimnaAugustine pleasure!
Hey Bahram great video, I just have question is it a good idea to store the dictionary files in redux to access it from client components?
Yes you can use Redux for that or React context.
@@hamedbahram Yeah, but useing state to store translations does not seem to be a good practice, I gues I will use next-intl and use a custom function to get server side translations.
@@Saleh_Balakisiyev Whatever works better for you.
Hello
Thanks for great explanation.
I have added third language. There are 3 languages now. But It's not working properly.
Thanks
I should no matter how many languages you have. Check your i18n config, actual json dictionaries, and the `getDictionaries` function to include the third locale.
Thanks for your support it was a problem with order of the locale array. finally fixed it. thanks again
@@hamedbahram
hi thanks for this tutorial. can I use this also if I want a dictionary folder or translation folder inside of a component on a app/route/_component library? for better organization?
Absolutely!
is there an example where you implement an actual CMS?? Great video
We have CMS related videos but not with Internationalization. I'm working on a couple of projects for that, so stay tuned.
@@hamedbahram wonderful, what CMS will you consider for the upcoming projects?
I's recommend SANITYCMS
Thanks, I'm brasilian and your chanel help-me to translate my app
Glad to hear that! Welcome to the channel.
Hello, thanks a lot for the clear explanation!
You don't show generateStaticParams right?
What would be the exact benefit to add it ?
The `generateStaticParams` will instruct NextJs to generate pages statically and cache them for faster response.
@@hamedbahramThanks! Is it normal that all my app is re rednered whenever i change the language ?
Also, I belive there is an issue with the exclusion with the favicon.ico in the matcher because i get a server side error whenever i change page saying : Error loading dictionary for locale "favicon.ico": TypeError: dictionaries[locale] is
not a function
Amazing content. Could you make a tutorial on how to implement headless cms with multiple languages? I’m trying to do it with Sanity
For sure! I have that in my schedule.
Great explanatory video 🙏 thank you Hamed
How can I translate 'de/about' path to 'de/uber' in the URL?
My pleasure, Evren! You'd have to add path translation to your middleware to redirect `de/about` to `de/uber`
Great video! Finally someone who explained it normally and I understood it. I just have a question, can we somehow catch an error if I select for example a German language and there is no translation for a certain section? The app crashes like that, so if there is some way to handle it, so that the default translation (en) is used and the app doesn't crash. Of course it could be checked in every single file to see if it exists, but that seems stupid to me.
Thanks!
And then another question. If I pass translation props to the client component, I have to type them all through typescript. It is annoying if I have a bigger translation to put in, so I have to do it this way? Can't I do it differently and better so I don't have to write it all by hand?
Thank you, I appreciate it! That's a good point, you can definitely put some guardrails to handle cases where the translation doesn't exist.
Do you have any ideas or tips on how to do this well? And what about typing the props, does it have to be done that way?
@@hamedbahram?
@@d4rzk252 I don't have any tips or specific implementation recommendations.
Thanks a lot. I have question what about farsi when one lang is RTL and the other is LTR
Glad you enjoyed it! To you tailwind for RTL languages, you can check the `lang` parameter in your root layout and add the `dir="rtl"` attribute to your html tag, which then enables you to use the `rtl:` and `ltr:` modifiers in tailwind. You can read more about it here => tailwindcss.com/docs/hover-focus-and-other-states#rtl-support
First of all, thanks for the solution! But I need to ask: Have you ever tryed to put an image on /public and return it using ? This solution seems to force the path to the /en for example, and the images does not load...
Good question! You can copy all your images into an `images` folder inside the `public` folder and then exclude the `images` folder from running the middleware inside the config matcher like ↓
```
export const config = {
matcher: ['/((?!api|_next/static|_next/image|favicon.ico|images).*)']
}
```
@@hamedbahram Heey thanks for the response ;) Do you think I can make a blog post for it? I'm starting a blog full based on solutions and value, would be cool if I could mention your project :D
@@danestrela For sure man! go for it.
Thanks.I hava a query, I am getting the translation from separate backend API, like the key for english version is the name while translation is name_2; for example receiving the users list from API, [{user:{location:'english-name',location_2:'translated-name'}] and same like for other properties like city and city_2 as keys for english and translated version respectively. Do I still need dictionaries as I am getting the translation from backend and can I reuse the same component because for name I need to show {user.name} but if the language is other(Arabic), then {user.name_2},
If the translations are coming from a separate API, you won't need the local dictionaries anymore.
How would you approach the topic of i18n if your locale was not stored in your URL, but rather in your user settings, which would be fetched on app load ?
I'd fetch the user setting in the middleware and redirect to the correct locale.
@@hamedbahram What do you mean by "redirect" ? Since the locale is not stored in the URL, I don't see the point of redirects, am I missing something ?
@@pot42 I thought you want to read the user preference from your DB instead of the request headers. If you want to implement a different route structure, then you'd need to have dynamic pages that have request specific logic to render content in different languages.
you are great!
Thank you!
Hi Hamed I implemented internationalization in my project using Page to pass the lang property to the child components. However, with many child components, the chain of steps to pass the dictionary through the props becomes complicated. Is there any way to import the dictionary directly from Page child components using SSG?
I would appreciate your help!
Hi Mariel! You can share the dictionary with React context or a global state management like Zustand. Hope this helps. I may create a video on this since it's been asked a lot :)
@@hamedbahram
Thank you for your response, Hamed. However, this is compatible with server components, as using context is for client components.
@@marieltorres2873 For server components you can call the `getDictionary` function directly to get the dictionary. For client components you can pass the translation through props or share via global state. Does this answer your question?
@@hamedbahram I'm facing the same issue. in this case how a server-side component can know which is the current language since only page level components get the current language as a prop?
Thanks for your video! I could implement i18n in SSG mode using nextjs 13 app router. But one suggestion - can we omit default language(en) in the router?
Since everything is living inside the `lang` folder, it's not possible to remove the default local from the URL.
thanks for teh tutorial. One question though: with the locale, the error and 404 pages reverted to the nextjs ones instead of using mine. how can I force them?
Essentially the issue is that automatic redirects to not-found do not work inside of a dynamic segment like [lang]. So you need to use a catch-all that calls notFound().
You will need:
1. Catch all component: [...not_found]/page.tsx
2. Not found page: not-found.tsx
```
// [...not_found]/page.tsx
import { notFound } from 'next/navigation';
export default function NotFoundCatchAll() {
notFound();
}
```
Another problem is that inside of your not-found page you will not have access to page params. So you cannot access the locale from page params. You can instead set a custom header in your middleware if you want to localize this not-found page.
```
// not-found.tsx
import { headers } from 'next/headers'
export default async function NotFound() {
const headersList = headers()
const locale = headersList.get('x-i18n-locale') || 'en'
...
}
```
Thank you so much for this content.
I’m encountering a problem where the act of switching languages (which consequently alters the locale in the URL) is causing interference with the functionality of the browser’s back button. My aim is to guarantee that when the back button is clicked, it directs the user to the preceding page, irrespective of any changes in language. Is there a method to accomplish this?
You're welcome! How does it interfere with the back button?
Thanks for the good explaination... I'm still beginner in Localization... How can I use the dictionary in client components
correctly my project code is like this toast.error(t('toast.error.users.invalid_invite'));
using useTranslation hook
Is it better to pass the translations as props to client components?
Yes you can pass the translation as props or share it via React context.
Thanks! How would I do this if my pages aren't server component but client components?
Share the translation via global state or pass the scope as props to the client component. But it's best to leave the client component only to the ones that need user interactivity.
Hi mr hamed. How to localize view direction for rtl and ltr?
You can check the `lang` parameter in your root layout and add the `dir="rtl"` attribute to your html tag, which then enables you to use the `rtl:` and `ltr:` modifiers in tailwind.
Hi thanks for your video I've been using this translation for some time but there's one problem I'm struggling with. What if I'd like to change only one word from json to be bold or change his color. I remember while using useTranslation in react only need to wrap it by bold selector in json and then just use to make it work
You'd need to use a third-party library for those functionalities.
Not able to access public folder for images after implementing i18n. Would you please help?
Good question! You can copy all your images into an `images` folder inside the `public` folder and then exclude the `images` folder from running the middleware inside the config matcher like ↓
```
export const config = {
matcher: ['/((?!api|_next/static|_next/image|favicon.ico|images).*)']
}
```
We created a lang inside the application folder and did everything inside it, but how do we use the not found file in this situation? How can I make the contents of the not found file to be included in the layout inside the lang folder?
That's a good question! I haven't found a way to implement the `not-found` page in this folder structure. I will continue digging into this...
The detail is when I destructure the Header and create the Navbar, when I place the Navbar inside the Header everything is fine, the problem occurs when I pass the Header to the layout.tsx, it generates an error in the Line where I pass the Header < Header lang = { params.lang } />. with that additional component, it would go one file behind and I don't know what I should call it in the layout
It maybe that you're importing a server component into a client component. What error are you getting?
Great video, thank you! the only downside is that when switching to a different language, the redirect can possibly cause data lost for unsaved data in the current page. how can I maybe add a warning modal or something similar to let the user know before actually redirecting?
Perhaps you can implement it in the local toggle button before switching languages.
I switched the Link buttons to a select input and used the onChange property and redirect() method from next/navigation. it does the trick. thank you man@@hamedbahram
Nice explanation !! I have a doubt ,if we add the language inside our project in json file is it affect the SEO ? ,for my current project SEO is very important is it affect indexing the page from google crawler when we change the language ?
Nah not really the JSON file remains on the server, and you're pages would be content on the client. You can also use the `generateStaticParams` function to statically build your pages at build time.
@@hamedbahram Thanks
@@vinodhm8452 Anytime!
Hi Hamed, what is your Vscode font?
Hey! It's Operator mono.
Hi Hamed, thank you so much for your videos! I'm having some trouble trying to set span tags within text from dictionaries. Is there any way to implement them? Thanks in advance 🙏🏼
Anytime! That's a bit tricky to do 🤔
Yeah, that's what I think too 😅 But if I need to store, for instance, a blog post entry that has bold, italics... What would be the proper way to do it?
@@SamuelAlegreCastro probably a CMS that support internationalizaiton would be your best bet.
Bro i found one bug in this approach
trying to add Image to your project will not work if the image exist in the public folder
example :
public
--- image1.jpg
it will break
any fix ?
Good question, two ways you can go about this, firstly, if you are serving up the image from your public folder its better to statically import your image in any component using it so NextJs would serve it from your `_next/static` folder which is excluded from the i18n middleware. Secondly you can move all your static images into a folder (e.g ./public/images/...) and exclude that folder from the middleware using the config matcher.
@@hamedbahram Thank you so much!
@@amershboul9107 anytime!
How to get dictionary in client components as it gives warning to not to use async function in client components?
You can pass the required translation scope to the client component as props. Alternatively you can use the `use` hook to get the entire translation. See this video → ruclips.net/video/oMvW3A_IRsY/видео.html
Hello so and so, I was trying to remove the Nav from the Header in a new component, but Typescrscript gives me an error in the layout and another thing I am trying to do is change the language buttons inside the locale-switcher, to place the flag And I haven't been able to get it to be a dropdown menu either, could you give me some suggestions or do you know any tutorial for it?
You'd need a client component for a dropdown and that's probably the error you're getting. You can add the `use client` directive in the beginning of the file.
@@hamedbahram In the Header I bring the Navbar () and assign it the 'use client', and I pass the props to the Header ({ params }: { params: { lang: Locale } }) , and then in the layout.tsx I pass the Header above the children , but it gives me the following error:
"message": "Type '{ lang: "en" | "es" | "pt" | "de"; }' is not assignable to type 'IntrinsicAttributes & { params: { lang: "en" | "es" | "pt" | "de"; }; }'. Property 'lang' does not exist on type 'IntrinsicAttributes & { params: { lang: "en" | "es" | "pt" | "de"; }; }'.",
install the dropdown menu and the option for the flags in locale-switcher.tsx, I'm trying to do it right now
Is there a way to access the translations in client components? Currently I get the error message that the dictionary.ts file is 'server-only'. Should I just pass the translations as props?
That's right you can pass them as props.
is possible show the content of the /en/about in the path /about ? like a default path?
Unfortunately not! with the way this is implemented everything is living inside the `lang` folder.
I have a question. I was make link constant that contain array that have href and label. The label it was key of my translation that store in json file of the translation like you show. When I loop through my links I don’t know how to dynamic the translation when it is de structure from getDictionaries.
In example:
en.json
{
“home”: “ HOME”,
“about”: “ABOUT”
}
Links
const links = [
{
href: “home”,
label: “home”,
},
{
href: “about”,
label: “about”
}
]
You can use dynamic parameters something like `navigation[link.label]`
how avoid props drilling from page.tsx to nested components?
See this video → ruclips.net/video/oMvW3A_IRsY/видео.html
i love your content bro
Thanks. Appreciate your comment.
Thanks for sharing! Spent quite a lot of time to configure i18n in my project and get some ideas from your video. Just have one more question: how would you organize singular/plural keys inside of dictionary in this type of keys getting? :) And also how would you separate this dictionary files in case of much bigger amout of keys?
Good question! I'd have to look into the singular/plural keys, but for the JSON files, you can have multiple files and merge them together before reading from them. Keep in mind that all these files remain on the server and won't be sent to the client.
@@hamedbahramthanks for the answer:) Well i'm still struggling with all this stuff. I'd like to make something universal to be able use messages on server, and on client if needed. And specially to be able use dynamic values in this messages, including pluralization.
@@evgenydus363, can you give me an example of what you're trying to do?
@@hamedbahram let's say we want to pass dynamically a string "2 tasks remain". This number will come from DB, and we should handle pluralization (1 task, 2 tasks... In different languages). So using for example next-intl it would be like string in json (or js) "{count} {count, plural, =0 {tasks} =1 {task} other {# tasks}}". It doesn't look very flexible. I made a helper to generate this options. But still not very sure that it will work on server and on a client component. The most difficult thing in this is to get translation function ( like t = useTranslations(); t(tasks.remain, {count: 2}) ). And also the local should come from env and should not be in url:)
Well, i'd say that i resolve all of this but will be very grateful if you could maybe make a video with many different cases, to dive deeper in this topic. By the way i found that next-intl doc is not very correct sometimes. For example, there is a case using useMessages in async component (next-intl-docs.vercel.app/docs/environments/server-client-components#option-4-providing-all-messages), but i'm getting an error like "useMessages can not be used in async components" :)
what happens when we have content in the database? Currently Im follow this pattern for the UI, and getting the DB content dynamically, by reading the lang param in url I show one field or another in DB. But not sure if ths the way to do it.
That can work.
Soo good channel! Amazing keep it up! Where is the donation page?
Thank you Dimitrios! I don't have a donation page ❤️ subscribing to the channel is the best support 🫡
Coool, thx
My pleasure!
Bro, I'm stuck at implementing the localized not-found.tsx page. Can you help??
Sure, what problem are you facing?
I'm a bit confused about the error.tsx page. Currently I've created a folder named [...rest] to handle all the invalid paths but as the error.tsx is client side component, it is showing me error. Do you have any sample project or can you update the existing with a not found page, please?
@@fakhrulislamfuad8072 Sure I'll have that in mind for the part II of the video.
@@hamedbahramthanks a lot bro.. Hope that it comes very soon☺️☺️☺️
Hi, good job, thanks!
But I have several components in depth and it is very inconvenient to pass props "lang". If I create a context, it affects performance and the components must be client component. What is your opinion? And is it better to connect the library "next-international"??
That's right you need to either pass props or provide a context to share the dictionary. There are no right or wrong answers here, you'd have to see what works better for your project. Haven't used the `next-international` package in the App router yet, but if you need the extra functionality that comes with these packages, you can use it. The `next-intl` package is also another one.
Ok, but if you write lang in redux state, will localization work?
@@РоманБрошніцкий yeah it should.
@hamedbahram, if I throw "translation" into redax state, then to get data from there, I need all the components that receive redax state to be client-side? what do you think
@@РоманБрошніцкий I think Redux is an overkill for this case. React context is Ok but if you're not happy with context you can use Zustand.
Implementation with Sanity please!
Sure!
I have a question. I downloaded the Git repository to try and use it. The next folder contains all the exported files, but it's using 7MB. Isn't that high for only 2 static pages? I don't understand why the weight is so high.
That's actually pretty small for a typical NextJs app. This folder contains all you server and client code, dependencies, as well as static assets. This is not similar to a static export
@@hamedbahram yes, I've tested the code. I need to add something more to export it statically. However, if I export it with an "out" folder, I can't use the middleware for the index redirection. The pages work, but the index returns a 404 error. Do you know how to do the same thing with static generation only? Or what could I do since I need to create a website with two languages, but it doesn't have functions, only static content? Best regards, and thank you very much.
Excellent, do you think you can share the notion notes?
I'll publish it as a blog post on my site this week :)
amazing as always! I enjoyed your flow and fluency and you made the topic very interesting and easy to understand. The mood of the video is also very upbeat and fun. I appreciate your hard work!
a question, how can we add support for right to left languages like persian to this app with tailwind CSS?
Glad you enjoyed it! To you tailwind for RTL languages, you can check the `lang` parameter in your root layout and add the `dir="rtl"` attribute to your html tag, which then enables you to use the `rtl:` and `ltr:` modifiers in tailwind. You can read more about it here => tailwindcss.com/docs/hover-focus-and-other-states#rtl-support
@@hamedbahram I'm going to test it, thanks, I appreciate how you always respond to the comments and interact with your fans. Keep up the good work! 💪
@@alishayegh7047 My pleasure Ali Jan!
thx first of all how can i make the check depend on toggole button and change the html can you please explane more@@hamedbahram
❤@@hamedbahram
Thank youu very much Sir, I'm learning a lot from your videos ❤
I have a question, is it possible to get translated content using a loop, in case we will translate a navigation menu?
Glad to hear that! yes you can use a loop.
@@hamedbahram hey sir, i've config the exact same code as you and it works. however it doesn't have metadata in the root url can u check that and give me some solutions how to have metadata even in the root url.
@@MinhNguyen-ft6iv It does have a title tag and meta description tag in the root layout. You can check the deployed version here => next-i18n-ten.vercel.app/en
@@hamedbahram yes but only when your url has '/en' or '/[lang]' , without the [lang] path in the url it doesn't have the metadata. You could see it in your app vercel deploy - opengraph. Just the same problem as I am facing
Would you like to make this with using Sanity CMS
Yeah that makes an interesting project.
have you a discrod ? where I can try to ask help I i need@@hamedbahram
for example, i have this ReactNode: Front-end developer for over 4 years focusing on ReactJs and NextJs., how do i do it this way? or the only way is put in that way and when i pass in the component i make an split in string ?
Not sure if I understand your question!
@@hamedbahram The problem is this: I have some texts that have elements in the middle, how can I make these elements not just a string?
example:
return(
Front-end developer for over 4 years focusing on ReactJs and NextJs.
)
If I used internalization as you configured it, what would it be like to pass the tag?
thats soo good but how about client component?????
Thanks! you can pass in specific translations to your client components.
@@hamedbahramyou know a open source key manager? example to manage the keys in i18n or to build it
@@zakidzz, good question! Nothing off top of my head!
@@hamedbahram was thinking of making api route that read the local json and basic page to make crud operations , even for multi files json namespaces would love to see a vedio about it (everything in same next js app) but the route work only in dev version not production
Hi. Thanks for the great video.
I've got a problem after implementing internationalization: Google can't index it, says - Failed: Server error (5xx). Any ideas on how this can be fixed?
Well technically your pages will be static and visible to google, so I'm not sure what's happening there. The 500 error might be something that's failing in your middleware.
Yes, all my pages are visible. Except the root “/“. It redirects to /en and for google it’s seem to be unavailable. The solution here can be is to get rid of ‘en’ translation and make it default without /en
@@filipploss With the implementation in this example, we can't remove the `en` since all pages live inside the `[lang]` dynamic segment. But I'm not sure why the root is not available to Google in the first place!
I am still confused about this line:
import 'server-only';
What is that?
The `server-only` is a React package you can use on any module that is only meant to run on the server. It will give you a build error if you ever import anything from that module into a client component. It's just a guardrail to make sure your server code stays on the server.
@@hamedbahram why is that different from just writing "use-server"
@@hamedbahram Am I gonna need that if I am using Typescript?
@@asemkakhi3284 It has nothing to do with `user server`. The `use server` directive is for creating server actions. The `server-only` package is something you can use anywhere in your server code to protect it from being used in client-side.
Hello, how to use this localization for coming data from backend
I'm working on a video to show this using a CMS. Stay tuned!
@@hamedbahram i am going to be happy for this,Thanks
İt is more good to use node js
@@hamedbahram Hello, Do you work about this piece?
Is there a way this could work without any routing or domain change? I feel the ideal would be to just support different languages in any given page regardless of links or domains, like the Facebook website does it for example
Hmm 🤔 good question. I'd have to think about it.
is there any approach in which we don't change the Url and save the language in local storage or cookies and then make a button on that button click we change the language ?
Yes you can do that.
Take New York Times as an example, do they utilize internationalization? when you click on Espanol or Chinese, it seems everything changes drastically. Do you they rebuild everything under new domain? does that count as a form of internationalization?
There are different ways to implement this: Routing can be internationalized by either the sub-path (/fr/products) or domain (my-site.fr/products).
@@hamedbahram Thank you. I just searched up a few multilingual websites. most websites which use subpath, seem to have the same layout when you switch language. About the content whether it's a blog or product, do we have to create multiple versions of the content in database/CMS? What is the best approach to store them, do we need to create a separate table for each language?
@@yunyang6267 The content is typically coming from a CMS, most of which support internationalization.
I can't call the getDictionary function because it says 'use client' at the top. When I delete the 'use client' text, errors appear in other places. How can I fix this?
You can call the `getDictionary` function in your page server component and only pass the necessary translation scope to your client components.
How about doing routing whitout that middleware file? I'm trying to build a static app with i18n, but for some reason I can't redirect the user to another file when i'ts trying to access the root file, so it gives the 404 error.
Unfortunately static exports don't support middleware functions or internationalized routing!
what can we. do then to deploy static pages with this method @@hamedbahram
@Hamed Bahram
what about in a situation where a developer uses 'use client' flag in the rootLayout ,
how do one intend to use
export async function generateStaticParams() {
return i18n.locales.map(locale => ({ lang: locale }))
}
in this cas, because sure 'use client' is needed to use useState in the RootLayout if there is need for it
Instead of adding the `use client` to the root layout, you should move the interactive logic that requires React state to a client component down in the tree.
Hi guys , i followed the tutorial and i'am about to deploy my app. i face issue because i dont. have any index.html file but fr.html and en.html instead. i'd. like some help to fix my issue
This implementation requires a middleware function and won't work with static exports.
@@hamedbahram how could i deploy then ?
@@louisrogerguirika8281 You can deploy it to Vercel or any other platform that supports NextJs.
Woah 🤯
Thanks for tuning in, Hosna!
Thank you
You're welcome 😊
There is no way to translate client components as well?
You can share context or pass down props to client components.
it seems the nextJS 13 internationalization is ugly without npm packages. I actually do not use server components. I will continue to try and find a way to implement it without supporting server components.
You can continue using the `pages` router in NextJs 14 if you find that more straight forward and/or easier to implement.
Can we implement client side ?
I'd have to create a part II video on that since a lot of folks have asked me. In the mean time you can pass the translation down as props or share via React context.