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
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
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
TH-cam 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!
@@user-tz8mw2uk6k 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 → th-cam.com/video/RTAJ-enfums/w-d-xo.html
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?
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},
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?
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 → th-cam.com/video/oMvW3A_IRsY/w-d-xo.html
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
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 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?
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.
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.
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
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.
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?
@@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.
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
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.
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.
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
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?
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?
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).*)'] } ```
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” } ]
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?
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' ... } ```
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.
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.
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 ?
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
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?
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 → th-cam.com/video/oMvW3A_IRsY/w-d-xo.html
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?
@@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
In file i18n.config.ts I have export const i18n = { defaultLocale: 'ua', locales: ['ua', 'en'], } as const But when I reload page at route "/" it redirects me to "/en" insted of "/ua"
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
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.
@@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
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?
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.
@@hamedbahram I will. Also solved the redirection problem. middleware.ts file was outside the src directory, worked fine once moved it to src directory. Thank you
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?
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
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.
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
thanks for your answer this is my way (It relies mainly on cookies so that the preferred language is sent in each request as it is known) import data from '@/app/core/dictionaries/en.json' export const DictionaryType = {...data} as const /** * React hook for managing language-related functionality in the application. * @function useLang * @returns {null | typeof DictionaryType} - The loaded language dictionary or null in case of an error. * @example * const MyComponent = () => { * const dictionary = useLang(); * * // Use the dictionary in your component * if (dictionary) { * // Render content using the loaded dictionary * } else { * // Handle the case where the dictionary failed to load * } * }; */ const useLang = (): typeof DictionaryType | null => { const [dictionary, setDictionary] = useState(null); const loadDictionary = async () => { try { const langFromCookie = getCookie(config.langKey); let local: Locale = i18n.defaultLocale if (i18n.locales.includes(langFromCookie as Locale)) local = langFromCookie as Locale const dictionary = await getDictionary(local) setDictionary(dictionary) } catch (error) { console.error('Error loading dictionary:', error); setDictionary(null); throw new LangException() } } useEffect(() => { loadDictionary() }, []); return dictionary; } export default useLang;@@hamedbahram
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
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
@@hamedbahram yes, you would be able to access it if you go to something like "/en/not-found" But if you try to go to "/en/1234" you will not see it, you will just see the default 404 black page
Hi, it works like a charm. The only thing I am struggiling with is an error I get in the console which says that the dictionary[locale]() in the dictionary.ts file is not a function. Did anyone else encounter this error?
Hey! Thanks. Do you get the error if you clone my code? The error is probably because you're importing the 'getDictionaries' function in a client component
@@hamedbahram Thanks for the response! I don't know what the cause was, but after removing node_modules and installing everything again I don't get any errors (that's why I was wondering as my code was 1:1 like yours) :)
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?
@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.
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.
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.
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!
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.
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!
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.
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!
You're doing amazing.Keep up the good work.
Thank you!
the way you structure your videos and follow the documentation is fabulous
Appreciate it! Glad you think so!
Thanks man!
I used this implementation and it's working like flash.
Glad it helped!
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!
Amazing tutorial. I log in just to thank you. Thanks a lot!
You're welcome! Great to hear that.
I was waiting for this one for a while…thank you dude, your work rocks…🎉🎉🎉
My pleasure! I appreciate your comment 🙏🏽
right on time, as i am about to implement this feature.
Awesome! Hope this helps 🚀
Thank you! It really helped with the current project
Great to hear that!
Thank you. You are a lifesaver what an amazing content.
You're welcome! I appreciate that!
Thanks, Helped me a lot to complete my project
Glad it helped!
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.
thanks for this great video
My pleasure!
Thank you, this was so helpful!
Glad to hear that!
Thank you so much!
Glad it helped!
Thank you a million, that was so helpful!
Glad it helped!
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
TH-cam 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!
@@user-tz8mw2uk6k 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 → th-cam.com/video/RTAJ-enfums/w-d-xo.html
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.
You are helping me a lot. Thx :)
Glad to hear that!
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 work mate! Your stuff is very usefull. Keep it going! 🎉🎉🎉
Glad to hear that! I appreciate it mate 🙂
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!
Very, very good!
Thank you! Cheers!
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.
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
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.
Clear explanation, thanks
Glad it was helpful!
you are great!
Thank you!
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 → th-cam.com/video/oMvW3A_IRsY/w-d-xo.html
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 → th-cam.com/video/1S7yFzU2ulg/w-d-xo.html
how avoid props drilling from page.tsx to nested components?
See this video → th-cam.com/video/oMvW3A_IRsY/w-d-xo.html
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
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 ❤
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?
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!
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
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?
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.
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.
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 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
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.
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.
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.
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...
Coool, thx
My pleasure!
Thanks, I'm brasilian and your chanel help-me to translate my app
Glad to hear that! Welcome to the channel.
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?
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`.
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).*)']
}
```
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]`
Implementation with Sanity please!
Sure!
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.
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'
...
}
```
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 Hamed, what is your Vscode font?
Hey! It's Operator mono.
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.
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`
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.
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.
Sorry, I have a problem with getLocale always returning "en"?
Not sure why you have that problem. You can clone my code (link in the description) and compare your code to mine and see where the problem might be.
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.
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 → th-cam.com/video/oMvW3A_IRsY/w-d-xo.html
@@hamedbahram Thank you so much for your reply
@@ShimnaAugustine pleasure!
Woah 🤯
Thanks for tuning in, Hosna!
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 🫡
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.
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?
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
In file i18n.config.ts I have
export const i18n = {
defaultLocale: 'ua',
locales: ['ua', 'en'],
} as const
But when I reload page at route "/" it redirects me to "/en" insted of "/ua"
Look at your middleware and see if you're using the correct local. You can compare it to my code and see what you're doing differently.
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
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.
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
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.
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.
redirection from / to /en is not working for me.
Watch the video that comes out today 🤓
@@hamedbahram I will. Also solved the redirection problem. middleware.ts file was outside the src directory, worked fine once moved it to src directory. Thank you
@@irfanulislamjishan4416 glad to hear you figured it out.
What about client components?
Watch this → th-cam.com/video/oMvW3A_IRsY/w-d-xo.html
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☺️☺️☺️
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
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
Great video! If you would like custom domains instead of lang code. How do you implement that?
Thanks! You would then redirect to the correct domain or subdomain.
Hm i still dont understand where I change to domain or subdomain. @@hamedbahram
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.
how to use getDictionary in client component ?
Pass it as props or share it via react context.
thanks for your answer
this is my way (It relies mainly on cookies so that the preferred language is sent in each request as it is known)
import data from '@/app/core/dictionaries/en.json'
export const DictionaryType = {...data} as const
/**
* React hook for managing language-related functionality in the application.
* @function useLang
* @returns {null | typeof DictionaryType} - The loaded language dictionary or null in case of an error.
* @example
* const MyComponent = () => {
* const dictionary = useLang();
*
* // Use the dictionary in your component
* if (dictionary) {
* // Render content using the loaded dictionary
* } else {
* // Handle the case where the dictionary failed to load
* }
* };
*/
const useLang = (): typeof DictionaryType | null => {
const [dictionary, setDictionary] = useState(null);
const loadDictionary = async () => {
try {
const langFromCookie = getCookie(config.langKey);
let local: Locale = i18n.defaultLocale
if (i18n.locales.includes(langFromCookie as Locale))
local = langFromCookie as Locale
const dictionary = await getDictionary(local)
setDictionary(dictionary)
} catch (error) {
console.error('Error loading dictionary:', error);
setDictionary(null);
throw new LangException()
}
}
useEffect(() => {
loadDictionary()
}, []);
return dictionary;
}
export default useLang;@@hamedbahram
@@nabiabdelkader9833 Nice!
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.
Thank you
You're welcome 😊
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.
I have a question
How do you add i18n to the not-found page?
Because placing it under [lang] will make it not to work!!
I'd have to try that out. I should technically work even if it's inside a dynamic path like `[lang]`
@@hamedbahram yes, you would be able to access it if you go to something like "/en/not-found"
But if you try to go to "/en/1234" you will not see it, you will just see the default 404 black page
@@asemkakhi3284 I see 🤔 I'll test it out
@@hamedbahram Also I learned that not-found component doesn't take any arguments, so how can you access the lang params in it??
That worked for me:
"export default async function RootLayout({
children,
params,
}: {
children: React.ReactNode;
params: { lang: Locale };
}) {
const dictionary = await getDictionary(params.lang);
return (
{children}
);
}"
Awesome!
Excellent, do you think you can share the notion notes?
I'll publish it as a blog post on my site this week :)
There is no way to translate client components as well?
You can share context or pass down props to client components.
Hi, it works like a charm. The only thing I am struggiling with is an error I get in the console which says that the dictionary[locale]() in the dictionary.ts file is not a function. Did anyone else encounter this error?
Hey! Thanks. Do you get the error if you clone my code? The error is probably because you're importing the 'getDictionaries' function in a client component
@@hamedbahram Thanks for the response! I don't know what the cause was, but after removing node_modules and installing everything again I don't get any errors (that's why I was wondering as my code was 1:1 like yours) :)
@@zabialy2919 Sweet!
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.
@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.
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!