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
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
UA-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 → ua-cam.com/video/RTAJ-enfums/v-deo.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
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.
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.
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
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},
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.
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 → ua-cam.com/video/oMvW3A_IRsY/v-deo.html
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
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?
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?
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?
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?
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.
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).*)'] } ```
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
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” } ]
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
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.
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' ... } ```
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.
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"
@@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.
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?
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
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.
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?
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.
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 ?
@@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
@@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
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.
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
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) :)
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
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?
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
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.
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!
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?
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
@@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
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 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?
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!
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!
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!
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
UA-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 → ua-cam.com/video/RTAJ-enfums/v-deo.html
the way you structure your videos and follow the documentation is fabulous
Appreciate it! Glad you think so!
You're doing amazing.Keep up the good work.
Thank you!
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
@@user-lb6xe8ct2r that's right!
thanks for this great video
My pleasure!
Amazing tutorial. I log in just to thank you. Thanks a lot!
You're welcome! Great to hear that.
Thank you. You are a lifesaver what an amazing content.
You're welcome! I appreciate that!
Thank you so much!
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!
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 🚀
Thanks, Helped me a lot to complete my project
Glad it helped!
Thank you! It really helped with the current project
Great to hear that!
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!
Wow! Thanks man. You've saved my day✌
My pleasure!
Lets gooo! I was waiting for this one! Awesome content as always!
There you have it, Juan! I appreciate that.
Thank you, this was so helpful!
Glad to hear that!
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 → ua-cam.com/video/1S7yFzU2ulg/v-deo.html
Thanks, man! It's very useful and convenient
Glad it helped!
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.
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?
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.
Thank you a million, that was so helpful!
Glad it helped!
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 ❤
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 → ua-cam.com/video/oMvW3A_IRsY/v-deo.html
you are great!
Thank you!
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.
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`.
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...
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
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.
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?
how avoid props drilling from page.tsx to nested components?
See this video → ua-cam.com/video/oMvW3A_IRsY/v-deo.html
You are helping me a lot. Thx :)
Glad to hear that!
Great work mate! Your stuff is very usefull. Keep it going! 🎉🎉🎉
Glad to hear that! I appreciate it mate 🙂
Thanks a lot for this video!
You're welcome! Glad you found it helpful.
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!
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.
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.
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).*)']
}
```
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
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.
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]`
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
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.
Clear explanation, thanks
Glad it was helpful!
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.
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'
...
}
```
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.
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.
Very, very good!
Thank you! Cheers!
Coool, thx
My pleasure!
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
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.
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.
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.
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.
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.
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?
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.
hello, please tell me how to use the client component in this project?
Just like any other project. You can pass your dictionaries as props, or share it via a global context using React Context.
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
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.
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.
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??
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.
Hi Hamed, what is your Vscode font?
Hey! It's Operator mono.
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.
What about client components?
Watch this → ua-cam.com/video/oMvW3A_IRsY/v-deo.html
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.
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!
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
There is no way to translate client components as well?
You can share context or pass down props to client components.
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.
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.
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
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.
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!
Hi ! I don't know I configed like your video but when I run build , and deploy to server , all the Links not working .
You can clone my repo (link in the description) and see if you still have the same problem, and compare what I'm doing differently.
@@hamedbahram copy that ! thanks bro !
@@jasonjin251 Anytime!
@@hamedbahram NIce !!!! fixed !!!! finally found the problem is about antd ui StyledComponentsRegistry . delete it and everything works fine !
@@hamedbahram by the way. Which UI framework is suit for nextjs ? any recommend ?
will there be a way to implement it with jsx?
Yeah it would be the same with jsx.
Thanks, I'm brasilian and your chanel help-me to translate my app
Glad to hear that! Welcome to the channel.
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`
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.
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.
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
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!
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
Can't translate a client side page?
Yes you can pass your translation object down to client components as props or share via React context.
Thank you
You're welcome 😊
Excellent, do you think you can share the notion notes?
I'll publish it as a blog post on my site this week :)
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?
@@user-kd7wn7cz3m probably a CMS that support internationalizaiton would be your best bet.