Internationalization in NextJs 13

This video looks at internationalization (i18n) in the App router in NextJs 13. We'll discuss routing and localization using NextJs middleware by building a simple project.
👉🏼 How to remove the default locale
🔗 • Removing the Default L...
👉🏼 The Ultimate NextJs Course
🔗 www.hamedbahram.io/courses/ne...
👉🏼 Project source code (Github)
🔗 github.com/HamedBahram/next-i18n
👉🏼 NextJs documentation
🔗 nextjs.org/docs/app/building-...
Chapters
0:00 Intro
4:40 Routing using middleware
8:40 Localization
12:10 Project code
21:45 Outro

[@dzeej1]

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🙏🏼

[@hamedbahram]

I'm glad to hear that man! Appreciate your comment!

[@pauloalves2840]

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!

[@hamedbahram]

Glad it was helpful! I appreciate your comment.

[@felixhoevelborn]

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?

[@hamedbahram]

That's right, with the dynamic `[lang]` segment, we need to have the locale in the URL even for the default `en`.

[@ilaydaozel4851]

Thank you. I have tried other internationalization videos too but this video worked the best for me at the end!

[@hamedbahram]

Glad to hear that Ilayda!

[@AnnaBazdyreva-zf8by]

Great job! Thanks a lot for the detailed and clear explanation of internationalization in Next 13. Made my current landing bilingual with this video!

[@hamedbahram]

Glad to hear that, Anna!

[@27sosite73]

the way you structure your videos and follow the documentation is fabulous

[@hamedbahram]

Appreciate it! Glad you think so!

[@m__link6499]

I was waiting for this one for a while…thank you dude, your work rocks…🎉🎉🎉

[@hamedbahram]

My pleasure! I appreciate your comment 🙏🏽

[@juanferrer5885]

Lets gooo! I was waiting for this one! Awesome content as always!

[@hamedbahram]

There you have it, Juan! I appreciate that.

[@awesome-view]

Thanks man! I used this implementation and it's working like flash.

[@hamedbahram]

Glad it helped!

[@yazugaming5573]

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” } ]

[@hamedbahram]

You can use dynamic parameters something like `navigation[link.label]`

[@alexeysmirnov9288]

Thank you Hamed so much! Excellent step by step explanation. That's just what I've needed. Liked and subscribed.

[@hamedbahram]

My pleasure! Thanks for the sub!

[@ariel_chp]

Amazing tutorial. I log in just to thank you. Thanks a lot!

[@hamedbahram]

You're welcome! Great to hear that.

[@HigherStudyAspirant]

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},

[@hamedbahram]

If the translations are coming from a separate API, you won't need the local dictionaries anymore.

[@perseyiis]

Thank you. You are a lifesaver what an amazing content.

[@hamedbahram]

You're welcome! I appreciate that!

[@lorisyanis]

Thank you a million, that was so helpful!

[@hamedbahram]

Glad it helped!

[@bringmemore2621]

Great work mate! Your stuff is very usefull. Keep it going! 🎉🎉🎉

[@hamedbahram]

Glad to hear that! I appreciate it mate 🙂

[@hosseinjafari2896]

You're doing amazing.Keep up the good work.

[@hamedbahram]

Thank you!

[@user-qw4hk3us4d]

Thank you! It really helped with the current project

[@hamedbahram]

Great to hear that!

[@pablopenia]

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.

[@hamedbahram]

That can work.

[@zabialy2919]

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?

[@hamedbahram]

That's right you can pass them as props.

[@filipploss]

Thanks, man! It's very useful and convenient

[@hamedbahram]

Glad it helped!

[@aliaskari989]

Wow! Thanks man. You've saved my day✌

[@hamedbahram]

My pleasure!

[@temtechie]

@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

[@hamedbahram]

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.

[@johnaroj]

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?

[@hamedbahram]

Absolutely!

[@arazmmmdli6126]

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?

[@hamedbahram]

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...

[@komepc]

Thank you, this was so helpful!

[@hamedbahram]

Glad to hear that!

[@MenixPL]

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

[@hamedbahram]

You'd need to use a third-party library for those functionalities.

[@luisgerardocontreras6612]

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

[@hamedbahram]

It maybe that you're importing a server component into a client component. What error are you getting?

[@trusht]

right on time, as i am about to implement this feature.

[@hamedbahram]

Awesome! Hope this helps 🚀

[@arjunsv8496]

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?

[@hamedbahram]

You're welcome! How does it interfere with the back button?

[@icedev8078]

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.

[@hamedbahram]

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

[@icedev8078]

@@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.

[@leof240]

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?

[@hamedbahram]

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' ... } ```

[@mohdsahil226]

Not able to access public folder for images after implementing i18n. Would you please help?

[@hamedbahram]

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).*)'] } ```

[@nicocouss7849]

You are helping me a lot. Thx :)

[@hamedbahram]

Glad to hear that!

[@pouriahoseianzadeh8898]

Thanks, Helped me a lot to complete my project

[@hamedbahram]

Glad it helped!

[@hesagoku6793]

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.

[@hamedbahram]

Unfortunately static exports don't support middleware functions or internationalized routing!

[@louisrogerguirika8281]

what can we. do then to deploy static pages with this method @@hamedbahram

[@user-lb6xe8ct2r]

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?

[@hamedbahram]

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.

[@user-lb6xe8ct2r]

@@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

[@hamedbahram]

@@user-lb6xe8ct2r that's right!

[@lucasmolenaar64]

Thanks! How would I do this if my pages aren't server component but client components?

[@hamedbahram]

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.

[@luisgerardocontreras6612]

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?

[@hamedbahram]

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.

[@luisgerardocontreras6612]

@@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

[@selimsezer3629]

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?

[@hamedbahram]

You can call the `getDictionary` function in your page server component and only pass the necessary translation scope to your client components.

[@karolmaj1955]

Great video! I just have one question about routering. When user hit "/" path. How Could I redirect him base of default language ? Thanks

[@hamedbahram]

Watch this video → kzbin.info/www/bejne/Z4Saqnmwipeoosk

[@amershboul9107]

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 ?

[@hamedbahram]

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.

[@amershboul9107]

@@hamedbahram Thank you so much!

[@hamedbahram]

@@amershboul9107 anytime!

[@ismaelsocador]

should I pas the lang from pages to components/client by props always? won't it be a mess?

[@hamedbahram]

Yes you can pass it as props, or if you're drilling down so much you can create a context and wrap your components.

[@WahajHafeez]

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]

Yes you can do that.

[@mohamadabdeen6906]

thanks for this great video

[@hamedbahram]

My pleasure!

[@benjamingoller6267]

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...

[@hamedbahram]

Thanks for sharing your feedback. I get it and will have it in mind for future videos.

[@mohsenlotfi3905]

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

[@hamedbahram]

Glad it was helpful.

[@user-kd7wn7cz3m]

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 🙏🏼

[@hamedbahram]

Anytime! That's a bit tricky to do 🤔

[@user-kd7wn7cz3m]

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?

[@hamedbahram]

@@user-kd7wn7cz3m probably a CMS that support internationalizaiton would be your best bet.

[@PetroArva]

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?

[@hamedbahram]

Yes a global state management can be the solution.

[@claudivan.dev_]

I tried to add the src folder but i think with the middleware dont work witch this folder

[@hamedbahram]

You have to move your middleware inside the src folder at the same level as the app folder.

[@kozubskyi]

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]

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.

[@DemiZhao-pi7qp]

Clear explanation, thanks

[@hamedbahram]

Glad it was helpful!

[@onizuka_js1484]

Thanks a lot for this video!

[@hamedbahram]

You're welcome! Glad you found it helpful.

[@diegovergaracasanova1159]

is possible show the content of the /en/about in the path /about ? like a default path?

[@hamedbahram]

Unfortunately not! with the way this is implemented everything is living inside the `lang` folder.

[@maciejfiglarz4871]

how avoid props drilling from page.tsx to nested components?

[@hamedbahram]

See this video → kzbin.info/www/bejne/pX7ZiGZ3lK6Fqbs

[@z1982_]

Hello, thanks a lot for the clear explanation! You don't show generateStaticParams right? What would be the exact benefit to add it ?

[@hamedbahram]

The `generateStaticParams` will instruct NextJs to generate pages statically and cache them for faster response.

[@z1982_]

​@@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

[@filipploss]

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?

[@hamedbahram]

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.

[@filipploss]

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

[@hamedbahram]

@@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!

[@davitgevorgyan4724]

hello, please tell me how to use the client component in this project?

[@hamedbahram]

Just like any other project. You can pass your dictionaries as props, or share it via a global context using React Context.

[@QuickSolutions_]

How to get dictionary in client components as it gives warning to not to use async function in client components?

[@hamedbahram]

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 → kzbin.info/www/bejne/pX7ZiGZ3lK6Fqbs

[@caglayanevren]

Great explanatory video 🙏 thank you Hamed How can I translate 'de/about' path to 'de/uber' in the URL?

[@hamedbahram]

My pleasure, Evren! You'd have to add path translation to your middleware to redirect `de/about` to `de/uber`

[@pot42]

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 ?

[@hamedbahram]

I'd fetch the user setting in the middleware and redirect to the correct locale.

[@pot42]

@@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 ?

[@hamedbahram]

@@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.

[@ShimnaAugustine]

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?

[@hamedbahram]

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 → kzbin.info/www/bejne/pX7ZiGZ3lK6Fqbs

[@ShimnaAugustine]

@@hamedbahram Thank you so much for your reply

[@hamedbahram]

@@ShimnaAugustine pleasure!

[@damiaofranca4694]

for example, i have this ReactNode: Front-end developer for over 4 years focusing on ReactJs and NextJs., how do i do it this way? or the only way is put in that way and when i pass in the component i make an split in string ?

[@hamedbahram]

Not sure if I understand your question!

[@damiaofranca4694]

@@hamedbahram The problem is this: I have some texts that have elements in the middle, how can I make these elements not just a string? example: return( Front-end developer for over 4 years focusing on ReactJs and NextJs. ) If I used internalization as you configured it, what would it be like to pass the tag?

[@sorooshmlv6340]

Thanks a lot. I have question what about farsi when one lang is RTL and the other is LTR

[@hamedbahram]

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

[@AhmedAlsabsab]

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

[@AhmedAlsabsab]

Is it better to pass the translations as props to client components?

[@hamedbahram]

Yes you can pass the translation as props or share it via React context.

[@zillalsenmesrane1022]

thanks for the video , but what about the client components ? how can we implement this in it ? can anyone help please :/

[@hamedbahram]

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.

[@zillalsenmesrane1022]

@@hamedbahram thank you so much we can't wait for the video ❤

[@marieltorres2873]

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!

[@hamedbahram]

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]

@@hamedbahram Thank you for your response, Hamed. However, this is compatible with server components, as using context is for client components.

[@hamedbahram]

@@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?

[@joao-pedro-alves]

@@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?

[@amouzande9102]

Hi mr hamed. How to localize view direction for rtl and ltr?

[@hamedbahram]

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.

[@AhmedHuzain]

Thank you so much!

[@hamedbahram]

Glad it helped!

[@user-ec3vi9lo8l]

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

[@hamedbahram]

Hmm 🤔 good question. I'd have to think about it.

[@user-le2sy9qk8v]

Amazing content. Could you make a tutorial on how to implement headless cms with multiple languages? I’m trying to do it with Sanity

[@hamedbahram]

For sure! I have that in my schedule.

[@araki.simural]

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?

[@hamedbahram]

Since everything is living inside the `lang` folder, it's not possible to remove the default local from the URL.

[@Mcbuttifly]

Great video! If you would like custom domains instead of lang code. How do you implement that?

[@hamedbahram]

Thanks! You would then redirect to the correct domain or subdomain.

[@Mcbuttifly]

Hm i still dont understand where I change to domain or subdomain. @@hamedbahram

[@Saleh_Balakisiyev]

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?

[@hamedbahram]

Yes you can use Redux for that or React context.

[@Saleh_Balakisiyev]

@@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.

[@hamedbahram]

@@Saleh_Balakisiyev Whatever works better for you.

[@toffanettodev]

Very, very good!

[@hamedbahram]

Thank you! Cheers!

[@user-ly6dh6hh4b]

Hi, good job, thanks! But I have several components in depth and it is very inconvenient to pass props "lang". If I create a context, it affects performance and the components must be client component. What is your opinion? And is it better to connect the library "next-international"??

[@hamedbahram]

That's right you need to either pass props or provide a context to share the dictionary. There are no right or wrong answers here, you'd have to see what works better for your project. Haven't used the `next-international` package in the App router yet, but if you need the extra functionality that comes with these packages, you can use it. The `next-intl` package is also another one.

[@user-ly6dh6hh4b]

Ok, but if you write lang in redux state, will localization work?

[@hamedbahram]

@@user-ly6dh6hh4b yeah it should.

[@user-ly6dh6hh4b]

@hamedbahram, if I throw "translation" into redax state, then to get data from there, I need all the components that receive redax state to be client-side? what do you think

[@hamedbahram]

@@user-ly6dh6hh4b I think Redux is an overkill for this case. React context is Ok but if you're not happy with context you can use Zustand.

[@TheIdo14]

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?

[@hamedbahram]

Perhaps you can implement it in the local toggle button before switching languages.

[@TheIdo14]

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

[@matiasdelgado9372]

Hi Hamed, what is your Vscode font?

[@hamedbahram]

Hey! It's Operator mono.

[@zabialy2919]

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?

[@hamedbahram]

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

[@zabialy2919]

@@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) :)

[@hamedbahram]

@@zabialy2919 Sweet!

[@danestrela]

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...

[@hamedbahram]

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).*)'] } ```

[@danestrela]

@@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

[@hamedbahram]

@@danestrela For sure man! go for it.

[@fakhrulislamfuad8072]

Bro, I'm stuck at implementing the localized not-found.tsx page. Can you help??

[@hamedbahram]

Sure, what problem are you facing?

[@fakhrulislamfuad8072]

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?

[@hamedbahram]

@@fakhrulislamfuad8072 Sure I'll have that in mind for the part II of the video.

[@fakhrulislamfuad8072]

​@@hamedbahramthanks a lot bro.. Hope that it comes very soon☺️☺️☺️

[@user-pf5mo4hu1g]

There is no way to translate client components as well?

[@hamedbahram]

You can share context or pass down props to client components.

[@you3667]

you are great!

[@hamedbahram]

Thank you!

[@vinodhm8452]

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 ?

[@hamedbahram]

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.

[@vinodhm8452]

@@hamedbahram Thanks

[@hamedbahram]

@@vinodhm8452 Anytime!

[@user-tz8mw2uk6k]

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.

[@hamedbahram]

Hmm 🤔 I wonder why that is... Are you getting any errors?

[@user-tz8mw2uk6k]

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

[@user-tz8mw2uk6k]

KZbin 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

[@user-tz8mw2uk6k]

@@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!

[@hamedbahram]

@@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 → kzbin.info/www/bejne/iIWke2Cbo8uoo9U

[@martinvega1452]

will there be a way to implement it with jsx?

[@hamedbahram]

Yeah it would be the same with jsx.

[@amershboul9107]

i love your content bro

[@hamedbahram]

Thanks. Appreciate your comment.

[@user-1ey38jsoowb]

Excellent, do you think you can share the notion notes?

[@hamedbahram]

I'll publish it as a blog post on my site this week :)

[@evgenydus363]

Thanks for sharing! Spent quite a lot of time to configure i18n in my project and get some ideas from your video. Just have one more question: how would you organize singular/plural keys inside of dictionary in this type of keys getting? :) And also how would you separate this dictionary files in case of much bigger amout of keys?

[@hamedbahram]

Good question! I'd have to look into the singular/plural keys, but for the JSON files, you can have multiple files and merge them together before reading from them. Keep in mind that all these files remain on the server and won't be sent to the client.

[@evgenydus363]

​@@hamedbahramthanks for the answer:) Well i'm still struggling with all this stuff. I'd like to make something universal to be able use messages on server, and on client if needed. And specially to be able use dynamic values in this messages, including pluralization.

[@hamedbahram]

@@evgenydus363, can you give me an example of what you're trying to do?

[@evgenydus363]

@@hamedbahram let's say we want to pass dynamically a string "2 tasks remain". This number will come from DB, and we should handle pluralization (1 task, 2 tasks... In different languages). So using for example next-intl it would be like string in json (or js) "{count} {count, plural, =0 {tasks} =1 {task} other {# tasks}}". It doesn't look very flexible. I made a helper to generate this options. But still not very sure that it will work on server and on a client component. The most difficult thing in this is to get translation function ( like t = useTranslations(); t(tasks.remain, {count: 2}) ). And also the local should come from env and should not be in url:) Well, i'd say that i resolve all of this but will be very grateful if you could maybe make a video with many different cases, to dive deeper in this topic. By the way i found that next-intl doc is not very correct sometimes. For example, there is a case using useMessages in async component (next-intl-docs.vercel.app/docs/environments/server-client-components#option-4-providing-all-messages), but i'm getting an error like "useMessages can not be used in async components" :)

[@alishayegh7047]

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?

[@hamedbahram]

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

[@alishayegh7047]

@@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! 💪

[@hamedbahram]

@@alishayegh7047 My pleasure Ali Jan!

[@where2group334]

thx first of all how can i make the check depend on toggole button and change the html can you please explane more@@hamedbahram

[@alishayegh7047]

❤@@hamedbahram

[@louisrogerguirika8281]

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

[@hamedbahram]

This implementation requires a middleware function and won't work with static exports.

[@louisrogerguirika8281]

@@hamedbahram how could i deploy then ?

[@hamedbahram]

@@louisrogerguirika8281 You can deploy it to Vercel or any other platform that supports NextJs.

[@ebulfezsadiqov9341]

Hello, how to use this localization for coming data from backend

[@hamedbahram]

I'm working on a video to show this using a CMS. Stay tuned!

[@ebulfezsadiqov9341]

@@hamedbahram i am going to be happy for this,Thanks İt is more good to use node js

[@ebulfezsadiqov9341]

@@hamedbahram Hello, Do you work about this piece?

[@crysis992]

How to implement that when you already have a next-auth middleware & matcher for specific routes? Is there any way to have multiple middleware files?

[@hamedbahram]

Yes you can chain middlewares together to run internationalization first and then auth. I'm working on a video to demonstrate this, stay tuned.

[@sebmonti5904]

I need to see this one too !

[@hamedbahram]

@@sebmonti5904 Absolutely! I'm working on it.

[@user-lb6xe8ct2r]

@@hamedbahram just asked the same thing in a comment 'cause I'm having a hard time :/ So cool if you are doing a video about this!!

[@hamedbahram]

@@user-lb6xe8ct2r The video is already out, you can watch it here => kzbin.info/www/bejne/nJ6pinuVjdpmmpI

[@wingmann3632]

Coool, thx

[@hamedbahram]

My pleasure!

[@jasonjin251]

Hi ! I don't know I configed like your video but when I run build , and deploy to server , all the Links not working .

[@hamedbahram]

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.

[@jasonjin251]

@@hamedbahram copy that ! thanks bro !

[@hamedbahram]

@@jasonjin251 Anytime!

[@jasonjin251]

@@hamedbahram NIce !!!! fixed !!!! finally found the problem is about antd ui StyledComponentsRegistry . delete it and everything works fine !

[@jasonjin251]

@@hamedbahram by the way. Which UI framework is suit for nextjs ? any recommend ?

[@aspirine17]

So, how to get dictionary in client component?

[@hamedbahram]

You can pass them as props or share them via React context.

[@santyas]

How tricky is it implemented inside src folder?

[@hamedbahram]

Not that different, you just place your folders inside the 'src' folder.

[@dailyjstutorial]

Can we implement client side ?

[@hamedbahram]

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.

[@user-sj5su4wv9k]

Sorry, I have a problem with getLocale always returning "en"?

[@hamedbahram]

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.

[@faramazbaghirov670]

Hello Thanks for great explanation. I have added third language. There are 3 languages now. But It's not working properly. Thanks

[@hamedbahram]

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.

[@faramazbaghirov670]

Thanks for your support it was a problem with order of the locale array. finally fixed it. thanks again @@hamedbahram