Removing the Default Locale | Internationalization in NextJs 14

[@andresgiovannicanasrodrigu7301]

Wonderful. This video is gold. You are the only one talking about this topic. Do you think that is good idea, check the language saved in the user DB to set the locale in middleware? Some like: "const locale = user?.language ?? getLocale(request);"

[@hamedbahram]

Thank you! I'm glad you found the video helpful. And yes you can store user language preference in db.

[@heysahilsingh]

Everything is just PERFECT, I’ve found the best channel on NextJs tutorial I guess :). Just a feedback, in case you might want, try to talk a little fast. Just a little, somewhere around 1.15 - 1.25x

[@hamedbahram]

Welcome onboard! I'm glad to hear that! Thanks for the feedback, I'll try 😅

[@amelianceskymusic]

It's easy to speed up the video in the KZbin player itself, but not so easy to slow it down while maintaining decent quality

[@hamedbahram]

@@amelianceskymusic That's right :)

[@Sorkstryparen]

Awesome content as always. Would also love!! a video on this topic but using a cookie-based strategy instead. To opt-out of the route-based solution.

[@hamedbahram]

I appreciate that. Thanks for the suggestion.

[@SoufianeElkarnoubi]

Hi Hamed, thank you very much !!! You helped me a lot today !!! A spent few hours to understood this part of next and this video save me lot of time !! thx !!

[@hamedbahram]

You're welcome, Soufiane! I'm glad to hear it helped.

[@KaMZaTa]

Hi Hamed! What about url translation? That's really important speaking about SEO! You never mentioned it!

[@hamedbahram]

You're right that is important for SEO. I'll try that in future videos

[@KaMZaTa]

@@hamedbahram That would be great! Thanks!

[@hamedbahram]

@@den9943 How about using a translation object to map URLs and redirect in the middleware function?

[@arvin6]

Hi Mr. Hamed, Your tutorial on using Next.js for a multi-language website has been a real lifesaver for me. I've learned a lot about using next-intl for fixed content, but I've run into a challenge with dynamic content like user-created posts and comments. I'm not sure how to add them to the locales JSON files, and I've had trouble finding helpful resources on this topic. I would be really grateful if you could point me in the right direction and maybe even consider creating a tutorial on handling dynamic content within the locales JSON files. Your help would mean a lot to me and others facing similar challenges. Thank you so much,

[@hamedbahram]

Hey Arvin! Glad to hear you fount the videos helpful. As far as dynamic user generated content, I would store then in a database instead of trying to write them to JSON files. You can store all your translations and the dynamic content on a database. Does this make sense?

[@arvin6]

​@hamedbahram Thank you for replying so quickly. It makes a lot of sense now 🙏🏻💙. That explains why I couldn't find any resources about it.

[@hamedbahram]

@@arvin6 No worries man! Glad to help.

[@arvin6]

@@hamedbahram 🙏🏻

[@kursatpolatci]

Thank you so much. i had searched so much this subject. but i didn't find anthing. finally i made it thanks

[@hamedbahram]

You're welcome! Glad to hear that.

[@udhay2909]

Hi Hamed, I am continuously watching your vidoes, all of the things are very useful in my projects, Can you plz make the video about socket and it's connections in next js

[@hamedbahram]

Glad to hear that Udhay! Absolutely I'll cover socket in NextJs. Thanks for the suggestion.

[@averelgr]

Hi Hamed. You saved our lives! I would like to ask you what if I don not want to support /en/something but only /something and /de/something, and in case of /en/something I should redirect to /something. What would be the suggested way and to be aligned with SEO standrds in order not to have errors in Google Search Console?

[@hamedbahram]

Isn't what I showed in the video the solution you're looking for?

[@averelgr]

@@hamedbahram At the solution on the video, if you navigate to /en/something work as expected. I case of /en/somehting I want to redirect with the correct SEO way to /something.

[@EA-nr9hc]

Thank you so much! You saved me after hours and hours of googling

[@hamedbahram]

Glad I could help!

[@iantolmay1902]

Love the explanation! ❤ Definitely a sub from me. Quick question. Removing the default default locale is good for seo purposes? If a website already has seo, and wants to migrate to nextjs with internationalization?

[@hamedbahram]

I'm not sure how removing the default locale would affect the seo, not an expert in that domain.

[@amxwarestudios]

Hi Hamed, I followed your tutorial and i'm glad I figured out all the server and client components issue that has been bugging me for hours. The problem I have now is how do we persists this language preference of the user? I know about cookies and Docs mentioned NEXT_LOCALE cookie but I'm not quite sure what it wants or does. Does Next automatically handle the persistence of the preference with the middleware we setup?

[@hamedbahram]

Next doesn't persist anything inside the middleware, it just reads the request headers every time. You can add a cookie to keep track of that.

[@ZacharyStout-o5n]

Awesome video! Thanks for it! Any chance you can speak on how to pass these translations to a client component? I'm having a lot of issue in that regard! Thanks again!

[@hamedbahram]

I'll probably make a video on that.

[@ZacharyStout-o5n]

@@hamedbahram 😍😍😍

[@Kruspe616]

​@@hamedbahram Are there still plans to make that?

[@EduardoSotoTi]

Hi Hamed, thank you for your videos; they have been very helpful to us. For this reason, I wanted to ask if you have any idea or if you could make a video on how to use not-found.tsx, robots.ts, sitemap.ts, and manifest.ts. These files were working before implementing i18n, but now they aren't. Thank you very much from Chile.

[@hamedbahram]

That's a good question. Unfortunately implementing the `not-found` page with internationalization is not that straight forward. Here is a work-around → github.com/i18nexus/next-i18n-router/issues/36#issuecomment-1821887026

[@BestinaTV]

دمت گرم آفا حامد عزیز عالی بود💖

[@hamedbahram]

Eraadat 🫡

[@alexeysmirnov9288]

Thank Hamed for this useful video! Just in time)

[@hamedbahram]

Glad it was helpful!

[@fakhrulislamfuad8072]

This video was quite informative.. but bro.. please upload your next video on translating the not-found page efficiently

[@hamedbahram]

Thanks! I don't know what's with this, but I keep forgetting 😭

[@fakhrulislamfuad8072]

@@hamedbahram so sorry to bother but it would be more than appreciating if you do something regarding the issue.. Thanks in advance bro😃

[@hamedbahram]

@@fakhrulislamfuad8072 Hey! I haven't found a way to implement the `not-found` page in this folder structure. I will continue digging into this...

[@fakhrulislamfuad8072]

@@hamedbahram thank you so much bro..

[@juanferrer5885]

Hi Hamed, do you know where i should include my not-found file? For some reason if i put inside [lang] directory doesn't do anything. Great video btw!!

[@hamedbahram]

Good question! As of right now the `not-found` file doesn't work inside dynamic segments e.g. `[lang]`. A work around is to create a catch all page `[...not_found]` and invoke the `notFound()` function inside of it to render the `not-found` page inside your dynamic path.

[@mother_chucker12]

Thank you for the video. I have a question, how would you implement internationalization and localization (multi-region and multi-translation site) in Nextjs 14, like /[lang]/[region], with removing the default locale and region. Is it possible?

[@hamedbahram]

My pleasure! It would be a very similar concept to what we've done here.

[@mother_chucker12]

@@hamedbahram could you maybe create a video / repository with an example? I'm struggling with that... The default one if you go to '/' would be '/en/row' (both hidden from the url that user sees). Regions -> row, eu, us and au

[@msarlak1512]

hi sir thank you i want to use. fa and en and fa as default but i think code will be read by default AcceptLanguage i cannot set to fa(farsi) as default

[@hamedbahram]

You can change the default language of your browser, or update the code so it saves the user selection in local storage if you want to overwrite the browser default. I will have an updated video on i18n soon.

[@jarekch.3659]

Now we have /about and /en/about? Two urls for the same site? Is that correct for SEO?

[@hamedbahram]

well /en/about redirects to /about

[@ceza121121]

This is good but how we can use interpolation ?

[@hamedbahram]

I'm not sure, I think you'd have to use a third-party library for that.

[@sonakissonaki]

Hi Hamed, this is great work really. However, I seem to be running into an issue with locale-switcher. Say, in my i18n.config I have defaultLocale: 'de' and locales: ['en', 'de']. When the browser language is 'de' everything works. However, if the browser language is 'en', then localhost:3000 is redirected to localhost:3000/en. At this point a user attempting to switch the language via the button 'de' breaks the code. Am I missing something here?

[@hamedbahram]

Hmm 🤔 let me check this...

[@whisky961]

@@hamedbahram have you checked yet? it's very annoying. I am trynna debug it myself, nothing so far.

[@d4rzk252]

@@whisky961did u fix this? I have same problem…

[@amelianceskymusic]

Thank you. Next question: how to provide the dictionary without props drilling=)))

[@hamedbahram]

You can share via React context or any other global state management for that matter.

[@amelianceskymusic]

@@hamedbahram It sounds simple, but if you have a lot of child components - client side + server side - I have a lot of questions. I have not been able to solve this issue yet. Some other libraries have special functions/hooks for this

[@hamedbahram]

@@amelianceskymusic That's right other libraries usually expose a hook to access the dictionaries in client components. I'll try to add a part III video to this series covering that :)

[@arefpasha]

thank mr hamed for this useful video

[@hamedbahram]

Glad you found it useful!

[@АлександрЛебединский-э4ц]

ok, but what about client component? we can't load dictionary because 'server-only'! How should I localize client component?

[@sp4mdev]

Just wondering how we could generate static route for ‘/‘ and other routes that will be rewritten with the default lang? For now I’m assuming that the main entry ‘/‘ will be always dynamic?

[@hamedbahram]

Exporting `generateStaticParam` from the root layout will make sure that all pages are built statically. Remember the root `/` is also rewriting to `/en` under the hood.

[@sp4mdev]

​@@hamedbahramYes, if I haven't misunderstood, don't we need the static route for '/', since we are rewriting it with '/en'? In your current example, the routes are generated as `/en` instead of `/`, and I'm assuming that will make the landing page as dynamic. AFAIK we need to return the param (e.g. 'lang') in `generateStaticParam` but we can't since no param exists for '/' (passing '/' directly will break the app).

[@sp4mdev]

@hamedbahram So you're saying that since `/en` is generated, and when we access `/` we'll rewrite the `/en` and the contents of `/en` are ready to go, it'll almost act as if we statically generated `/`, is that correct?

[@hamedbahram]

@@sp4mdev yup!

[@zakidzz]

thank you for this but want to ask how to do client component? also , how about if i was fored to SSR on request how to code split the translation

[@hamedbahram]

Only pass in the specific translation to your client components or share the dictionary via a global state management.

[@naleon-yr5ss]

Everything works fine in a test environment, but in a production build, access to / will get a 308 redirect to /en. How can I solve it?

[@hamedbahram]

Not sure! I haven't had this problem on my deployed version.

[@KeepItFresh02]

I am having the same problem. local works fine, but prod is abit off. both have same configurations.

[@wakibtz7134]

Hi! I have a problem. When i made internationalization i can not get images from public folder. How can i fix it? I tried clone your code from github and put image there but same problem

[@hamedbahram]

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

[@wakibtz7134]

@@hamedbahram Yo man thank you so much!

[@hamedbahram]

@@wakibtz7134 anytime!

[@liviabellomi]

Sorry if this question has already been asked, but how do I translate a component that has some hooks (therefore client components) on it once the hooks cannot be called in async functions?

[@hamedbahram]

No worries! You can pass the required translation scope as props to the client component or share it via global state. I will create a video on this next week since it's been asked quite often :)

[@liviabellomi]

Thanks a lot! 😊

[@ryanpratama14]

How about making the browser remember the user's last preferred language?

[@hamedbahram]

Yeah you can write the locale to the local storage but you won't be able to read that inside the middleware.

[@nicolasaraujo4757]

I got a bug. My default locale is pt, if I change my location to USA I can't change my locale for pt, the app automatically comes back to en. It only occurs with the default locale, spanish works fine. My code is equal to yours.

[@hamedbahram]

I see... I'll have a look at it.

[@alexla1337]

@@hamedbahram Ya, I got this bug too. If default locale != browser local, so it's not work. I will try fix it. Upd: So you need in middleware to remove "getLocale" function and change where if pathnameIsMissingLocale - make this: "const locale = i18n.defaultLocale;" - Its help to me. After that browser locales will be disabled, and work url path locales only.

[@amirfarahani6580]

hi, thank hamed, i flow your video, and clone project. but in the path write a worng character like this:localhost:300/en/assd goes to infinty loop localhost:300/en/en/en/en/en/...assd why this?

[@hamedbahram]

Not sure why that's happening. It doesn't happen on my end. Check here → next-i18n-ten.vercel.app/

[@amirfarahani6580]

@@hamedbahram i use basePath in next.Config.js Can this be the reason for this?

[@luisgerardocontreras6612]

Ok, and when working with the src folder, which I am doing, I have problems with the import urls, so I used @/, what could I be doing wrong?

[@hamedbahram]

Look inside your js.config or ts.config if using TypeScript and see what import alias you're using.

[@ps__9979]

Nice tutorial, Hamed There is an issue with images (or any files for that matter) from public folder. They not loading Do you have any solution for that? thank you

[@hamedbahram]

You need to exclude your `images` folder from the config matcher.

[@ps__9979]

@@hamedbahram thx I see now that my reply from yesterday was deleted (probably bc of the link in comment) i actually linked stackoverflow answer with solution in middleware it self...in my case I couldn't set matcher to work properly maybe for the third part to implement one of the libraries that support complex string syntax...just a thought or setting lang in NEXT_LOCALE cookie thank you for hq tutorials

[@hamedbahram]

@@ps__9979 My pleasure! Thanks for the update.

[@Foused87]

​@@hamedbahramhow exactly can I do that?

[@hamedbahram]

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

[@kakun7238]

RangeError: Incorrect locale information provided I am getting this error when i try to go to the / route i need to go /en then only it works anyone facing this issue even after doing the above

[@hamedbahram]

Hmm 🤔 Not sure what that error is, It's working fine on my end.

[@kakun7238]

I found it bc I had put ne_NP as a locale

[@amelianceskymusic]

Do I understand correctly that when changing the language, we lose the search params in the address bar?

[@amelianceskymusic]

I use const searchParams = useSearchParams(); and add its to path `${path}?${searchParams }`

[@hamedbahram]

Hmm 🤔 good question! we might need an update here...

[@TheSummerPro]

Grazie mille!!

[@hamedbahram]

Piacere mio!

[@nikmat]

the middleware is not triggering for "/" route, for all other paths, middleware gets triggered and it rewrites or redirects as expected but for the root path middleware is not running. any idea on what the problem might be?

[@hamedbahram]

Can you expand on that... Do you mean it's not removing the default locale?

[@nikmat]

@@hamedbahram if I enter the “/“ in browser, I get 404, since it needs something in place of [lang], which should be added/rewritten inside our middleware right?. All other route paths like “/en/about” or simply “/about” works because middleware is intercepting those ones. I solved it finally, the issue was with config matcher, it not only stops all the static files paths but also the root path. So I removed the matcher and added a IF statement which calls next() for all the paths that doesn’t need [lang] at beginning. I directly copied from your GitHub and just removed the types since I’m in js. Hope you understand now, English isn’t my favourite language, sorry.

[@shalkar.koshenayev]

​@@hamedbahramyes I have the same problem((( Help please!

[@irfanulislamjishan4416]

Great video. loved it.

[@hamedbahram]

Thanks.

[@krisporovarde9370]

Hi, after using this method and trying to index the pages in google search console I get an server error "Page is not indexed: Server error (5xx)" is there something I could do? thanks

[@hamedbahram]

Which one of the pages are not indexed?

[@krisporovarde9370]

I used this on my own project, previously the pages were all indexed. After adding the no default locale the server error occured, but when I try the pages links in the url they work just fine@@hamedbahram

[@denissirenko309]

Thank you very much !!!

[@hamedbahram]

You are welcome!

[@Foused87]

How can I use that with zod for custom errors based on user localization?

[@hamedbahram]

🤔 Good question! I'm not sure.

[@Foused87]

veeeery helpful, thanks

[@hamedbahram]

You're welcome :) Glad it was helpful!

[@kazinafizanam9397]

According to your localization video, i have implemented the language switch system. but the issue I am getting is from the middleware you created. i am not getting my static files from the public folder. export const config = { // Matcher ignoring `/_next/` and `/api/` matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"], }; suppose I remove this matcher string and put simple "/" the static files load properly. can you tell me the solution? what do I need to change? please. thanks

[@hamedbahram]

You have to put your images inside an `image` folder inside the public folder.

[@kazinafizanam9397]

@@hamedbahram they are.. but still not show up if I do /images/home/banner.png for example...

[@hamedbahram]

@@kazinafizanam9397 The folder needs to match whatever you passed to the config. For example if it is `image` then the path needs to be `/image/..` and not `/images/...`

[@kazinafizanam9397]

@@hamedbahram you should have checked your code once... the issue is in your middleware function... i have rewritten the middleware it works fine now...

[@hamedbahram]

@@kazinafizanam9397 If you don't know how to add a folder to the config matcher don't blame it on the code.

[@pauloalves2840]

i refreshed the page and my comment disappeared? can you see it?

[@hamedbahram]

I can see this comment 😁

[@quizproject-n1k]

Hi, i tried to use this dictionary function called getDictionary as "use server" and get error Error: dictionaries[locale] is not a function was trying with async,await then return dictionary but error still showing...

[@hamedbahram]

What are trying to do? no need for `use server` look at my code, we're fetching data on the server.

[@quizproject-n1k]

@@hamedbahram i thought "use server" is replace for server-only because in that moment intl doesnt support use server...

[@wakibtz7134]

I make internationalization like you and i have a question. SORRY FOR SPAMING, i just have project now with soon deadline. I need to make pagintaion, but if i make Internationalization with removing the default locale, i cant get search params, if a do with default locale, i can, why?

[@hamedbahram]

What happens to your search params when removing the default locale?

[@wakibtz7134]

@@hamedbahram It's okey now, i fixed, i dont shure thats best solution but it works thanks. Problem was, when i go to next page in pagination for exemple, my middleware navigate me to page without queries. So i added in meddleware if i have queries -> add them to route. return NextResponse.rewrite( new URL( `/${locale}${pathname.startsWith("/") ? "" : "/"}${pathname}${ !queries ? "" : "?" + queries }`, request.url ) ); (Sorry for my english :)

[@szymon2806]

It doesn't work... I can access the homepage with / and with /en.

[@hamedbahram]

Not sure what you mean by it doesn't work!

[@askarzhaanbaev5834]

Could u please build this project? it still will work? maybe with output export.

[@hamedbahram]

This project is using middleware and won't work with static export. But you can see the built and deployed version here next-middleware-chain.vercel.app

[@Foused87]

All files from /public folder can't load. How can I fix that?

[@hamedbahram]

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

[@d4rzk252]

Hi, I found a bug that breaks the whole thing, just change the default locale to "de" and you can't change the language, I've been trying to fix it for a really long time but I really don't know how anymore, could you help me please? For my page I just need a default language other than "en" and when I change it to anything else it doesn't work anymore after that.

[@hamedbahram]

I'll have a look!

[@d4rzk252]

@@hamedbahram Thanks.. If you can't reproduce it, I'll make a video of what it does..

[@hamedbahram]

@@d4rzk252 sure that can be helpful!

[@d4rzk252]

@@hamedbahram I cannot post a link here

[@d4rzk252]

@@hamedbahram I sent u the video via your portfolio form

[@DevStreamJs]

but what if I fetch data from API ?

[@hamedbahram]

What do you mean by that?

[@DevStreamJs]

@@hamedbahram i mean i will receive the whole translation json from an API call. Not static JSON data

[@hamedbahram]

@@DevStreamJs Yeah that's fine too, you can fetch the data from a remote API.

[@DevStreamJs]

could you please make a video for remote API 🙏​@@hamedbahram

[@mzpizote]

Props drilling with lang looks very bad for me 😒

[@hamedbahram]

You can use the `use` hook to resolve the translation object in a client component and/or share it via context. See this video for the `use` hook → kzbin.info/www/bejne/pX7ZiGZ3lK6Fqbs

[@vincentbobinski5564]

IMHO this is sooooo unnecessarily complex! Really bad job done by vercel. using i18 should be doable with only a view lines of config code.

[@hamedbahram]

It's definitely not as straight forward as adding i18n to the `pages` router.

[@fungau1243]

Hi hamed, I followed the video in your previous video. However, it's giving 404 error. Reason for that i that it does not redirect to 'en'. it goes to 'localhost:3000/' instead of 'localhost:3000/en' How do I make it goes to '/en' ? I feel like it's not routing based on the default locale.

[@hamedbahram]

You can clone my code (link in the video description) and compare your code to mine and see what you're doing differently.

[@joaomaia9140]

Thx, how to know what is the current lang, on the lang switcher? locale !== pathName.split('/')[1], but is not working

[@hamedbahram]

It'd be your default locale, since we're removing the default locale from the URL. Alternatively you can set a custom header in your middleware to get the current locale.