i have a problem that i can access the locale in not found page that outside the locale folder and the not found pages inside it doesn't work i didn't understand the problem
@amirmohamed3568
3 күн бұрын
this is a great, is there a git hub repo??
@Dimidrol14
6 күн бұрын
Have you ever heard about Type Script ?
@nuelakinsiku8702
17 күн бұрын
Hi I don't know how long it'll take you to reply me hopfully real soon I'm working on a site it's in dutch , using next js, I don't speak dutch so everytime I try translating to english with the normal google translation from chrome, I get a NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. error the error usually will pop up only when google translation is on will following this interlization video help me fix that ? and can the translation be covered all through the web app?
@rach8805
23 күн бұрын
underrated guide tutorial, this is the perfect explaination video i ever found on KZitem
@KimLee-je5dl
24 күн бұрын
Hi teacher, I want locales inside src, please repair /((?!api|static|.*\\..*|_next).*)
@arielmerinos
29 күн бұрын
OMG this is the highest quality tutorial I've ever saw about i18 with next, can't say THANK YOU enough
@gheors1026
Ай бұрын
HI! your tutorial works perfectly and with typescript is even better, but how do I for example bolden a specific word into the json? I know we can do soemething like json: <strong> bolder word </strong> html: <p dangerouslySetInnerHTML={{__html: t("landing_description")}}/> but I would prefer to not use the "dangerouslySetInnerHTML". Thank you for your time!!
@i18nexus
Ай бұрын
You can use the Trans component imported from react-i18next: my_key: "hello <italic>beautiful</italic> <bold>{{what}}</bold>" <Trans i18nKey="myKey" values={{ what: 'world'}} components={{ italic: <i />, bold: <strong /> }} />
@danicmaxime9003
Ай бұрын
Cool tuto ! but is there any resource to config it with typescript aswell ?
@i18nexus
Ай бұрын
Yes, see here: github.com/i18nexus/next-i18n-router/tree/main/examples/i18next-example
@clipsboss7308
Ай бұрын
Best NextJS / Internationalization video so far! Thank you!
@i18nexus
Ай бұрын
Thanks!
@FediHammami-pz6ed
Ай бұрын
This video is really helpful. Thank you. But I have to ask, if i have a server component called ExampleServerComponent, in order to translaten I should pass the local as string and make async to call the initTranslation function and pass it the local with the namsepaces ?
@i18nexus
Ай бұрын
Yes, correct. You would use initTranslations just as we do in the page component.
@seb2435
Ай бұрын
Thanks for your help on my previous question, I was wondering how one could change the path for different languages, e.g in English an about page may be 'about', but in another language it would be something different. How could this be achieved?
@i18nexus
Ай бұрын
Good question. Unfortunately this is not currently a feature of the `next-i18n-router` library. If this is an important feature for you, I would recommend using next-intl instead of react-i18next. next-intl has support for this feature.
@abodfatairy9123
Ай бұрын
can you do it with typescript please
@i18nexus
Ай бұрын
Example here: github.com/i18nexus/next-i18n-router/tree/main/examples/i18next-example
@hs.karatas
Ай бұрын
So how can we apply this for the elements that are in the layout.js and a client component like NavBar ?
@i18nexus
Ай бұрын
Same way. Just use initTranslations in your layout and wrap your navbar with TranslationsProvider.
@hs.karatas
Ай бұрын
@@i18nexus Thank u so much
@nasko235679
Ай бұрын
How does this work when using custom auth like clerk that requires its own custom config in the middleware.ts file? Do I export it in addition to the clerk middleware function or do I nest it? Sorry if it's a newb question.
@i18nexus
Ай бұрын
Unfortunately we don't have a clerk example available. But the idea would be to combine the middlewares.
@huannalmeida
2 ай бұрын
Hi guys! Has anyone faced the following error ./src/app/i18n.js:20:10 Module not found 18 | resourcesToBackend( 19 | (language, namespace) => > 20 | import(`@/locales/${language}/${namespace}.json`), | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 21 | ), 22 | ) 23 | }
@i18nexus
2 ай бұрын
Hi there! You may want to check out this thread: github.com/i18nexus/next-i18n-router/issues/44 It's likely due to using turbopack.
@AmaanW3Dev
2 ай бұрын
While using the t function for the home component, NextJS returns an error on browser saying "t is not a function", when I am using it with the json key. How can I resolve this? Please let me know. Thank you.
@i18nexus
2 ай бұрын
It's difficult to say without seeing your code. Feel free to email us with more detail at [email protected]
@gheors1026
2 ай бұрын
Amazing job thank you. Your guide is really well explained!
@i18nexus
2 ай бұрын
Thanks, glad it helped!
@MatanSaban
2 ай бұрын
@i18nexus when i switch languages the select doesn't change to the right language, it stuck in the language it was before.. any solution? thanks, and ty for this gr8 tutorial!
@MatanSaban
2 ай бұрын
my solution is to pass prop like this to the langChanger <LanguageSwitcher currentLang={locale}/> and then in the langChanger to do this : const currentLocale = currentLang || i18n.language;
@i18nexus
2 ай бұрын
Yes this will work. Oftentimes users will have the select menu in a Navbar component in their layout. If following this tutorial, your layout is not wrapped in TranslationsProvider, and therefore the Navbar component will not have i18next loaded. If i18next is not loaded in the component, you cannot use i18next to get the current language. In this case, you can either wrap your Navbar in TranslationsProvider so i18next is loaded in that component, or you can use "useCurrentLocale" from the next-i18n-router library to get the current locale without i18next.
@MatanSaban
Ай бұрын
okay i'll try, thanks!@@i18nexus
@user-gc5qm4er3b
2 ай бұрын
goog job!
@naelektrisanje
2 ай бұрын
Hey, I need some help. The app is always running EN as a default language, has anyone had the same bug?
@Sasuke-kc6dw
2 ай бұрын
how can i use it inside of a non-"use client" component? because "locale" is undefined when using in a component or am i doing something wrong?
@i18nexus
2 ай бұрын
There's an example in the video of using it in a client component. What issue are you running into?
@Sasuke-kc6dw
2 ай бұрын
@@i18nexus , thanks for the response. I encountered an issue with server components. While it works fine on the page, when I try to use it in a server component, it states that it must be a client component.
@i18nexus
2 ай бұрын
Oh I see. For server components that aren't pages, you can't use useTranslation. You should use initTranslations like you do in pages.
@Sasuke-kc6dw
2 ай бұрын
@@i18nexus thanks, its working. I passed the locale to the component and used initTranslations
@n59k.
2 ай бұрын
thx man, best tutorial ever🎉
@i18nexus
2 ай бұрын
Thanks!
@n59k.
2 ай бұрын
@@i18nexus is it possible to make a dynamic paths with translation with i18n? for ex. en/products and cz/produkty I couldn't find any information on that( thank you in advance
@n59k.
2 ай бұрын
@@i18nexus is it possible to make a dynamic paths with translation with i18n? for ex. en/products and cz/produkty I couldn't find any information on that( thank you in advance
@sebastianmorales1659
2 ай бұрын
The only tutorial that is to the point and is functional, thanks <3. But do you know how to make the url change? /en/about/ > en /es/nosotros/ > es
@i18nexus
2 ай бұрын
If you're talking about actually translating your pathnames, unfortunately that's not currently a feature of next-i18n-router. But on the roadmap!
@Byou10playsBf3
2 ай бұрын
Hello, great tutorial! I am unfortunately getting an error when trying to translate in my components. "react-i18next:: You will need to pass in an i18next instance by using initReactI18next". Is it possible to send you the code and you could take a look at it because I cannot for the life of me find a fix on this. Would really appreciate it!
@gauravsinghrathore9000
2 ай бұрын
router is changing from localhost:3000 to localhost:3000/it on change of language is it possible to hide it from the URL just the way the default local en is getting hide from the URL. Please let me know if this is possible
@i18nexus
2 ай бұрын
Yes, that's possible. In your i18nConfig, set "noPrefix" to true. This is a feature of next-i18n-router.
@VinayKumarSupervisor
2 ай бұрын
Hi, Thanks for this in-depth tutorial on i18n, I am wondering if it would be possible to prefix the all routes/locale. eg: /en900, /es900 and the rest of the features remain the same? Please let me know how it can be achieved where the slug for a locale is different/prefixed
@i18nexus
2 ай бұрын
I'm not entirely sure what you mean. But it sounds like you're talking about this: github.com/i18nexus/next-i18n-router/issues/66 You may want to read that thread for an alternative
@JoaquinGarcia-ne3uy
2 ай бұрын
That was an amazing explanation, thank u so much!!
@i18nexus
2 ай бұрын
You're very welcome!
@SUlutas
2 ай бұрын
Best NextJS / Internationalization video so far! Thank you!
@i18nexus
2 ай бұрын
Thanks! Glad it helped
@ehitheo9230
2 ай бұрын
Well explained. Thanks bro.
@i18nexus
2 ай бұрын
Thanks!
@albinsjolin649
2 ай бұрын
thanks again dave/david
@i18nexus
2 ай бұрын
Glad to help!
@iknowishare-9705
3 ай бұрын
Very clear explanation. Awesome!!!
@i18nexus
2 ай бұрын
Glad it was helpful!
@ehtishamelahi4271
3 ай бұрын
can we do domain based internationalization? can you please provide me code for it?
@i18nexus
3 ай бұрын
Unfortunately the next-i18n-router library does not yet support domain based internationalization. You may want to check out next-intl which supports this. If you still want to use react- i18next, you'd have to use a custom implementation. We do not have any examples for that.
@user-el9tg4tu6v
3 ай бұрын
Wow, i18nexus is the website that I am looking for. Thanks!
@PeterJanickovic
3 ай бұрын
Hi, any idea how to combine the router with auth-next as there is also a middleware ?
@i18nexus
2 ай бұрын
We don't have a direct example, but we've been getting this question a lot. Hope to come out with an example soon.
@anupamapal
3 ай бұрын
Why is it in your cover screenshot you're pointing to the title? nobody is looking at your hideous face. now if it were a hot girl pointing it would mean "stop looking at my cleavage, checkout the awesome title"
@AngelSanchez-ln1fq
3 ай бұрын
Great tutorial, it works really well! Thank you. However the default locale doesn't work when I deploy the site to Netlify. All other locales are loading properly thought... any resource you can point me to?
@lesbian-dream
3 ай бұрын
Hello. can you help me again to fix middleware. I'm using clerk to authenticate but not working language switcher after adding clerk middleware
@i18nexus
3 ай бұрын
Hello, can you please send an email with your code to [email protected]. We can help you out from there.
@lesbian-dream
3 ай бұрын
@@i18nexus Sorry I have fixed it. const i18nConfig = { locales: ["de", "fr", "en"], defaultLocale: "de", // Change this to your default locale prefixDefault: true, // Adjust as needed }; module.exports = i18nConfig;
@onibenjo
3 ай бұрын
I have an application that uses the pages router and I want to migrate to the app incrementally because it's quite large, How do I go about this
@i18nexus
3 ай бұрын
To use i18next in both pages and app router, you would need to set up next-i18next in your pages router routes (we have a tutorial on our channel for next-i18next + pages router), and set up react-i18next in your app router routes (as seen in this tutorial). You would also need to make sure to run the middleware seen in this video conditionally on only your app router routes. You don't want to run the next-i18n-router middleware seen in this video on your pages router routes.
@nevzatyasar1
3 ай бұрын
excellent
@i18nexus
3 ай бұрын
Thanks!
@sandrotabatadze3768
3 ай бұрын
im struggling with this but i need pages router and there is no tutorial on this topic
@i18nexus
3 ай бұрын
Hi there. If you need a tutorial for the pages router you can check out our channel and look at our next-i18next tutorial.
@sandrotabatadze3768
3 ай бұрын
oaky thanks@@i18nexus
@petursteinn9718
3 ай бұрын
Amazing video overall, one thing i thought was kind of weird was that it was not done in typescript, for such a modern tutorial using modern technology i would have thought that typescript was a no-brainer to automatically use in the tutorial. Thanks though!
@i18nexus
3 ай бұрын
Yeah, we generally just do our tutorials in Javascript. For two reasons, 1) Typescript users will understand the tutorial either way, while non-Typescript users may not fully understand the Typescript. And 2) This is a tutorial, so we want to focus the time more on the concepts rather than the syntax. That being said, you can view a Typescript example of this tutorial here: github.com/i18nexus/next-i18n-router/tree/main/examples/i18next-example
@Mark-lg2qe
3 ай бұрын
Hello teacher, I am using Next.js middleware, I added next-i18n-router, and then next-auth verification is invalid! I can't find the problem! !
@Mark-lg2qe
3 ай бұрын
Your i18nexus tutorial is very good😊
@i18nexus
3 ай бұрын
Hi there! If you want to create an issue on the next-i18n-router Github repo with your code, perhaps we can help.
@codingroom928
3 ай бұрын
after app router, code for i18n has become too long and complicated. it's so sad. and 😢Provider for each page... is it real? anyway, thanks for nice tutorial
@i18nexus
3 ай бұрын
You only need the provider for each page if you want to only load specific namespaces per page. You could just put the provider in the layout if you don't mind loading all your strings for the whole app.
@UncleVanyaCode
3 ай бұрын
When changing a language, the scroll resets to the top of a page. Is there a way to keep it at the same place after switching?
@HassanRaza-db4mx
3 ай бұрын
verry useful tutorial , but I have one confusion remain how to do translate metadata like as (title, discription) 😉
@i18nexus
3 ай бұрын
I'm assuming you mean you have metadata that is stored in a js file that you import into your component? In that case, I would change the values of the metadata to be keys instead of text. For example: Instead of this: { title: "This is the title", description: "This is the description" } Do this: { title: "title_key", description: "description_key" } And in your component: t(metadata.title) t(metadata.description)
@@hiimkosu Thanks! I didn't realize he was talking about generateMetadata. This is the correct way to do it.
@karoldawid8981
4 ай бұрын
It doesn't work with typescript :)
@i18nexus
4 ай бұрын
NextJS, next-i18n-router, and react-i18next all support Typescript. You can see a full TypeScript example of using next-i18n-router and react-i18next in the "examples" folder in the next-i18n-router Github repo.
@karoldawid8981
3 ай бұрын
After two hours of struggling, I decided to create my own simple hook :) Of course, it's slightly based on this solution :p@@i18nexus
@user-qo6gs7wj9i
4 ай бұрын
why don't we put the translation provider in the root layout instead of putting in each page component ? is this possible
@i18nexus
4 ай бұрын
Yep, you can do that. But if you do this you will load into memory all namespaces for every page. This may be ok for smaller projects, but it's more efficient to load only the namespaces you need for each page.
@user-hm6tq9tp3c
4 ай бұрын
Please, help. Everything is cool with client components. But I have components that do not require interaction with the client, but require translation. I left them as server ones without 'use client'. Not pages, just components. But useTranslation does not work for them. How to translate server components? There are a lot of them and I don’t want to make them all use-client
@i18nexus
4 ай бұрын
Hi there! You can translate any server component the same way we do on the page components in this tutorial. You would use the initTranslations function.
@oleggulevskyy168
3 ай бұрын
@@i18nexus yes but wouldn't you have to drill down the locale from the parent server component to deeply nested children server components? how would one access locale param that is available in the "Home" page but not in nested server componetns children. This is required to initiate the intl function
@AndriyNosov
24 күн бұрын
@@oleggulevskyy168 Hello, have you found a solution to this problem?
@oleggulevskyy168
23 күн бұрын
@@AndriyNosov yep, used different library 😂
@AndriyNosov
23 күн бұрын
@@oleggulevskyy168 haha, next-intl?
@tomasjindal
4 ай бұрын
I have used TranslationsProvider on RootLayout Like This. export default async function RootLayout({ children, params: { locale } }: Readonly<{ children: React.ReactNode; params:{ locale: string } }>) { const {resources} = await initTranslations(locale, i18nNamespaces); return ( <html lang={locale}> <body suppressHydrationWarning={true}> <SessionProvider> <TranslationsProvider namespaces={i18nNamespaces} locale={locale} resources={resources}> {children} </TranslationsProvider> </SessionProvider> </body> </html> ); } When I use const { t } = useTranslation(); in my nested Client Component then Translations is not working. It always shows text in default language. For the nested Server Component, it is working fine. stackoverflow.com/questions/78055048/next-js-app-router-with-i18next-is-not-working
Пікірлер