NextJS APP Router | i18n Internationalization (i18next - next-intl) | Multiple languages (idioms)

Поділитися
Вставка
  • Опубліковано 26 сер 2024

КОМЕНТАРІ • 33

  • @mehdialijani5247
    @mehdialijani5247 9 днів тому

    perfecttt

  • @Miguel-qj2dw
    @Miguel-qj2dw 2 місяці тому +2

    By following the entire tutorial, almost everything works correctly, with the exception of the errors that are not defined, it gives me a hydration error.

    • @TheJavascriptWay
      @TheJavascriptWay  2 місяці тому

      Hydration errors can happen in seveval contexts. It's a tutorial on its own. Have a look.

  • @yousefsaeed732
    @yousefsaeed732 2 місяці тому +1

    I used this library in my portfolio to convert between Arabic and English or vice versa. The strange thing is that if the language is English and I switch to Arabic, then click on any link on the site, the language switches back to English. I tried to understand the reason but couldn't. I solved the problem by making the site reload 800 milliseconds after changing the language. Do you have any idea about the problem?

    • @TheJavascriptWay
      @TheJavascriptWay  2 місяці тому +1

      Hey. Not totally sure but I believe languages like Arabic are a special case in fact due to their specific characters. In fact I only tried to translate to european languages. Please check the docs for the exceptions. Don't know how to solve this at this point but believe that's the issue.

    • @yousefsaeed732
      @yousefsaeed732 2 місяці тому

      @@TheJavascriptWay when i change language it changes in url and cookies is there something else ?
      However when just navigate to another route it returns the same language as before changing

  • @hamzaking127
    @hamzaking127 2 місяці тому +1

    Hello, I have a problem with the Google search console. What is the link that will take me to the page? Am I original or /en?

    • @TheJavascriptWay
      @TheJavascriptWay  2 місяці тому

      Hey. Wathever you defined as your default idiom I believe. So, without the locale in the URL.

  • @kanwarsingh3369
    @kanwarsingh3369 3 місяці тому +1

    thanks for the vedio. but where can i get the source code for this?

    • @TheJavascriptWay
      @TheJavascriptWay  3 місяці тому

      Hey. I guess I forgot to link it in the description.
      It's not for free. You can get it from my Ko-fi page, later.

    • @TheJavascriptWay
      @TheJavascriptWay  2 місяці тому

      👉 Source Code: ko-fi.com/s/807b0f562e

  • @iwilldowhatiwannado843
    @iwilldowhatiwannado843 4 місяці тому +2

    ok.. Thanks for the video.. However.. you are using it only inside of the server component.. I expected how to use in client components.. I said before that next-intl might drop performance.. here are my questions.. is NextIntlClientProvider causes some performance issues? and can I use next-intl without generateStaticParams and unstable_setRequestLocale although I use both server and client components.. I am experiecing some performance Issues after using next-intl.. everything works well but it feels a bit slow and caching is not working.. I dont know is it next-intl's problem or from next.js..

    • @TheJavascriptWay
      @TheJavascriptWay  4 місяці тому

      All I am doing is to show how to implement i18n using the docs.
      I delayed this tut because I wanted to do something more advanced but in the last minute just tried to do the standard.
      For sure the implementation is now correct but to answer to your questions more development and testing is necessary. Cannot at this point confidently answer your questions. Maybe another viewer can.

  • @adenbinfarrukh4650
    @adenbinfarrukh4650 3 місяці тому +1

    Hi great video on translations. Wanted to ask if I can translate text without having any change in the URL ( without using /en, /fr etc or without anything like .en or .fr etc )

    • @TheJavascriptWay
      @TheJavascriptWay  3 місяці тому +1

      Hey. Thanks. Well this is the recommend way. Never tried a different way.

    • @adenbinfarrukh4650
      @adenbinfarrukh4650 3 місяці тому

      @@TheJavascriptWay Got it. Thanks

  • @germancardosodesousa5183
    @germancardosodesousa5183 3 місяці тому +1

    Hi! Great videooo! Helps me a lot.
    Could you explain me how could i add a /about and /contact page on this proyect?
    I saw you other video, but i could't make it works...
    Thanks!!

    • @TheJavascriptWay
      @TheJavascriptWay  3 місяці тому +1

      Hey. Thanks for your feedback.
      Adding pages is all about Routing (check my other projects). After that comes translating content anywhere inside your app but the core principles remain the same. I suggest you to check tutorials where I create pages (Routing) and you create your own project. After that implement i18next. It's not that hard.
      In the near future hope to build a project where I fully translate the App.

    • @germancardosodesousa5183
      @germancardosodesousa5183 3 місяці тому

      @@TheJavascriptWay Thanks for your support! I going to continue working on that, and in the worst escenario, i will waint for you future video :)
      My issue i think, is that i cant psuh the locale into my url, adding to the route. For example localhost/es/about.
      Thanks again!

    • @germancardosodesousa5183
      @germancardosodesousa5183 3 місяці тому

      ​@@TheJavascriptWay Thank you for your support! I truly appreciate it.
      I managed to navigate through the URL, for example, between localhost:3000/es/ and localhost:3000/es/about, but I can't do it through the navbar using .
      I assume it's done by handling the URL, but I can't figure out how.
      I'm eagerly awaiting that video :)
      Thanks again for the help!

    • @germancardosodesousa5183
      @germancardosodesousa5183 3 місяці тому

      Thank you for your support! I truly appreciate it.
      I managed to navigate through the URL, for example, between localhost:3000/es/ and localhost:3000/es/about, but I can't do it through the navbar using .
      I assume it's done by handling the URL, but I can't figure out how.
      I'm eagerly awaiting that video :)
      Thanks again for the help!@@TheJavascriptWay

    • @poojagarva
      @poojagarva 2 місяці тому

      Hello, did you find any solution for /about or /contact page?

  • @manikarthik2781
    @manikarthik2781 20 днів тому

    Could you do video on Pages router

    • @TheJavascriptWay
      @TheJavascriptWay  17 днів тому

      No. Sorry. You're the ONLY person requesting that. Just check the docs after checking this tutorial and it should help you.

  • @MohamedAymanpro
    @MohamedAymanpro 3 місяці тому

    Peace be upon you. I am a use of i18next on a site like this, and I am on the page work I create the data in a spicial js file and the displays are in the map. I want to translate the file that contains the data. I do not know how to connect it, and there is nothing in it to explain what I mean. All that is available is that it translates a sentence or two. i want to translates completly one entire file.can you help me

    • @TheJavascriptWay
      @TheJavascriptWay  3 місяці тому

      I am not sure if I understand what you mean but keep in mind that for this to work you need to use the exact filenames and file structure. It will break the APP if you don't!
      Translating 1 Page or the full website comes down to the same process.
      I would recommend you to rewatch the full video again and code along. Good luck. Thanks for your comment.

  • @rokkazmvm
    @rokkazmvm 2 місяці тому

    Hey, is there a way to have one language(lets say english) not have any prefix by default? And others have like shown on video?

    • @TheJavascriptWay
      @TheJavascriptWay  2 місяці тому

      Hey. If you want to have 1 single idiom there's no point to use i18next. The default idiom does not change the URL structure but if you add more languages the "en/pt/fr" will be shown inside the URL.

    • @sahilsworkmail
      @sahilsworkmail 2 місяці тому

      Yes you can

  • @togya4
    @togya4 4 місяці тому

    Hey thanks for sharing, can you now please explain about client component?

    • @TheJavascriptWay
      @TheJavascriptWay  4 місяці тому +3

      It's super simple. By default all components in NJ14 are server side components and you must leave them like that in most cases so you get benefits from server side rendering like faster page loading and more. In some other cases where you need user interactivity like click events or when using react hooks you need to change them to client side using "use client" at the top of the file.

    • @togya4
      @togya4 4 місяці тому

      @@TheJavascriptWay thanks again, My bad i didn't make it clear I meant the i18n client component how to use i18n? Again my apologies

    • @YTthings666
      @YTthings666 3 місяці тому

      @@TheJavascriptWay Thanks a lot !! Can you make a video with a responsive navbar ?