Internationalization (i18n) with Next.js!

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

КОМЕНТАРІ • 100

  • @mikllhor
    @mikllhor 3 роки тому +13

    Nice video! The loading animation is a animation of the actual Hadron colliders in Cern as they are two rings in which the particles travel before they collide for the experiment purposes.

    • @leerob
      @leerob  3 роки тому

      Woah!! Amazing insight. Thank you for this,

  • @sejeminecraft1
    @sejeminecraft1 Рік тому +3

    Finally! Thank you so much! You have no idea on how annoying it was to get this working with all other tutorials, where they want you to install annoying packages and waste your time. Your video was straight to the point and worked exactly as expected. As of note, this works in Next.JS 13 without any problems.

    • @marwaehab9793
      @marwaehab9793 Рік тому +1

      in next13 how you can access your files ? should I put all my folders inside app directory inside [lang] ?

    • @martadp6330
      @martadp6330 Рік тому

      Hi, did you use the Router from next/navigation ? cannot use next/router with Next.sj 13 :(

  • @joephus24
    @joephus24 3 роки тому +1

    Many months later, still helping people out. Tried next-i18next and it just wasn't working for my purposes. This vid is all I needed, hats of to you for helping us out with some native localization!

  • @gorank777
    @gorank777 Рік тому +2

    This is still the simplest way to do internationalization with i18n. Clear tutorial without a bunch of packages and errors. Good job, you got a new subscriber! :)

  • @floriankulig6929
    @floriankulig6929 3 роки тому +5

    already liking bc of the pro tip at 0:15

  • @kazi004
    @kazi004 3 роки тому +1

    Just started to exploring Next.js and found your channel with pretty useful videos like that :) thank you for that and subscribing of course !

  •  3 роки тому +4

    Hi dude.
    I love your videos and I learned a ton from you, thanks! Small clarification tho - 18 stands for number of letteres between "i" and "n" and not a total number of letters in "internationalization". Same like people use "a11y" for "accessibility", there is 11 characters between "a" and "y".
    Thanks and keep on making awesome content !

    • @leerob
      @leerob  3 роки тому +1

      Good clarification! This is called a "numeronym" :)

  • @brattonross
    @brattonross 3 роки тому +1

    Perfect timing, I'm just getting stuck into my first real Next.js app and it needs i18n support! I'm so glad I discovered your channel Lee, I'm about to go binge watch your React 2025 series now 😁

    • @jpomykala
      @jpomykala 3 роки тому +1

      Try SimpleLocalize for managing translations :)

    • @jeffreytgilbert
      @jeffreytgilbert 2 роки тому

      @@jpomykala ttags has a cli that extracts translation files from code, which is pretty great. It supports plurals and contexts which is pretty great too.
      Globalize supports currencies, number formats, and genders as well as all strings.
      I’d love it if one of these libraries/vendors had some format guide, support, or storybook preview integration that helped guide translators/translations to successful outcomes by giving them the right contexts and the amount of space something could occupy to fiddle with. I mean, we’re writing responsive web apps and native apps with dynamic datasets and sometimes large bodies of text or small lists of menu items, but to the translators, it all looks like a tiny text input or a line item in a text file. It’s pretty tragic. In 2022, i was fully expecting we’d have click to edit/create translation inputs as a dev mode the apps run in where a translator can just type text directly onto the component/page in a something like storybook component previewer and know immediately if they were over the character limit of the space allowed. Nope. No flying cars for me.
      I signed up for a simplelocalize trial and i’m going to give it a runthrough. Localise and transifex are absurdly priced. Yours seems more reasonable. Still want better features though.

  • @のざじ-k7e
    @のざじ-k7e Рік тому

    Thank you very much, I'm search this tutorial 2 hours stil not working, after see this video it work.
    Thank you Lee ❤‍🔥.
    auto subs

  • @anargyrosstylidis2595
    @anargyrosstylidis2595 3 роки тому

    This video is REALLY helpful. Helps me set up local restaurant's Greek and English web pages.

  • @davidk848
    @davidk848 Рік тому +1

    Hey, do you plan to make an updated version for the app router?

  • @luis_soul1
    @luis_soul1 3 роки тому

    This guy videos are like the ultimate nextjs guide. Really nice and helpful content, keep it going!

  • @Lucsy3012
    @Lucsy3012 3 роки тому +3

    Thanks for the tutorial! Just looked this topic up today!
    Do you know if there's an easy way, possibly built-in function, to translate the routes in /pages? Like if I have a "/contact" route I would want to create a "/fr/le-contact" route instead of a "/fr/contact"? The whole /pages/file.js equals the route is seriously amazing and I love that feature but as I'm being used to german websites it would be really weird if the site just switch the locale and not translate the URL itself. I searched the documentation, Github and Stackoverflow today and mostly only found complex systems so I think it's generally not easy to do because it opposed the neat routing system Next.js is giving us. But maybe you have an idea?

    • @leerob
      @leerob  3 роки тому +1

      Yes, this is possible! You would fetch the localized string in getStaticPaths and use a dynamic route.
      "When leveraging getStaticPaths, the configured locales are provided in the context parameter of the function under locales and the configured defaultLocale under defaultLocale."
      nextjs.org/docs/advanced-features/i18n-routing#accessing-the-locale-information

    • @Lucsy3012
      @Lucsy3012 3 роки тому +1

      @@leerob I'm having a hard time really understanding how getStaticPaths and getStaticProps works. I'll try something with the link you've provided :) You saying it's possible helps already, I guess I need some more expossure and practice to the framework 👌

    • @leerob
      @leerob  3 роки тому +1

      @@Lucsy3012 More info on getStaticProps / getStaticPaths here ua-cam.com/video/eMwTEo6AjDc/v-deo.html

    • @titoine79
      @titoine79 3 роки тому +3

      ​@@leerob but using this you would only have ONE 'controller', one place that would have to take care of every call to translated urls. Is there a way to keep the folder/file structure but the possibility to override/translate the folder name?
      For example if we have our file like this:
      - src/pages/cooking-recipe/{id}.js
      Url in french would be :
      - fr/recette-de-cuisine/{id}

    • @devanbeitel7215
      @devanbeitel7215 3 роки тому +3

      I, too, am trying to figure out how to handle localized paths. Otherwise i18n doesn’t make complete sense to my non-English speaking users when sharing/visiting links directly.

  • @TinoReyna1984
    @TinoReyna1984 Рік тому

    It's not complicated to set the locales as I thought. And it's way much better than using an external library, it doesn't affect the web site load.

  • @nikako1889
    @nikako1889 9 місяців тому +1

    can u make updated veriosn of internationalization? with newer version of next-intl

  • @SamFromaway
    @SamFromaway 3 роки тому

    Hi Lee. Great video! What do you think is the best library to use with next js now that routing is included natively? I tried i18next but as far as I can see it does not work really seamlessly.

    • @leerob
      @leerob  3 роки тому

      There are a few different options for localizing. As you mentioned, routing support is built-in so no external library needed there.
      For example: github.com/vercel/next.js/tree/canary/examples/with-i18n-rosetta

    • @SamFromaway
      @SamFromaway 3 роки тому

      @@leerob thanks I'll check it out 👍

  • @nathankrasney
    @nathankrasney 2 роки тому

    Excellent ! short but super informative

  • @helmianto358
    @helmianto358 2 роки тому

    Nice video, thanks for sharing. Very helpful for my problem.

  • @kennedynelson2637
    @kennedynelson2637 3 роки тому +5

    just love your content bro❤️

  • @MarjoForcado
    @MarjoForcado 2 роки тому

    Great video. Can you tell me where you got your NextJS shirt?

  • @caichentube
    @caichentube 3 роки тому

    Just what I need. Super helpful!

  • @yanhuan1
    @yanhuan1 2 роки тому

    Hello Lee,
    My Accept-Language header does exist, but it didn't work.
    Do you know why?

  • @anjanasinha8035
    @anjanasinha8035 3 роки тому

    Thanks for the short video

  • @julien_sublaunch
    @julien_sublaunch Рік тому

    Hey Lee Robinsin, how can detect location and update the locale for other pages not only index? Thanks a lot. Im in trouble with that

    • @necmettinsargn667
      @necmettinsargn667 Рік тому

      Did you find a solution bro? Im stuck in this too localhost:8000/... works but localhost:8000/en/... does not

    • @julien_sublaunch
      @julien_sublaunch Рік тому

      @@necmettinsargn667 no... :/ Didnt find something

  • @urmauur
    @urmauur Рік тому

    Hi man thanks for the tutorial, is that possible render using some variable inside the translation?

  • @francisagulto5017
    @francisagulto5017 2 роки тому

    Wonder if you could do Next JS localization with Headless WordPress and WPGraphQL and Polylang extenstion

  • @denniszenanywhere
    @denniszenanywhere 3 роки тому

    Any full tutorial on this? I'm new to Next Js but really need to add localization.

  • @krzysztofcieslik1071
    @krzysztofcieslik1071 3 роки тому

    Lee is it possible to make next.js Internationalization combined with Strapi Internationalization - I got pretty hard times to resolving that with SSG.

  • @bryanltobing
    @bryanltobing 2 роки тому

    is this scalable ? i've seen many libs store the translation in the json files. why do we have to do that ? why don't just store it in js file as string? is it because of the bundle size?

  • @SanderCokart
    @SanderCokart Рік тому

    now how would you redirect anything but en and fr to /en or /

  • @flashtrcom
    @flashtrcom 3 роки тому

    this is wonderful content, I look forward new videos

  • @stefanprobst3638
    @stefanprobst3638 3 роки тому

    in your example, will the client bundle include *all* translation strings, or just the ones for the currently active locale?

    • @leerob
      @leerob  3 роки тому +3

      In my example, it would include both. A most realistic approach would be to use getStaticProps to fetch only the translation you need!

  • @luthercunha6916
    @luthercunha6916 Рік тому

    Whatta* crazy starting!? LOL!

  • @khashe
    @khashe 3 роки тому

    This actually might be a very dumb question but it's been bugging me 😄
    When you say the content is serverside rendered, does that mean the key-values you defined in en.js/fr.js files?
    For example, theTailwindcss page uses Nextjs and it's lightning fast. Is the documentation content being serverside rendered?
    Thanks!

    • @leerob
      @leerob  3 роки тому +1

      This video will answer your question! ua-cam.com/video/eMwTEo6AjDc/v-deo.html

    • @Ace_Qnemes
      @Ace_Qnemes 3 роки тому

      I bet it uses SSG, cause documentation is static, no need to user interaction.

  • @rafaelhernand3z
    @rafaelhernand3z 3 роки тому +1

    Would like to see a more advanced video via domain based i18n :/

  • @aidenebarrett
    @aidenebarrett 3 роки тому

    I'm wondering if there is a way to dynamically set the locales, so the client can choose their languages within a CMS

  • @adeniyitaofik3832
    @adeniyitaofik3832 Рік тому

    how do you do translations for errors generarted from the api

  • @mathiassrensen6084
    @mathiassrensen6084 2 роки тому

    This is good stuff! Do you have more information on how to implement this for static pregenerated pages?

  • @lucasmdev
    @lucasmdev 3 роки тому

    You helped me in a project. Thank you!

  • @ConceptWebDeveloper
    @ConceptWebDeveloper Рік тому

    How to handle that With client side get data from endpoint ?

  • @abnetbezabh5402
    @abnetbezabh5402 2 роки тому

    how can we use translations wthout hook in a normal non functional ts file ?

  • @mastercode7851
    @mastercode7851 2 роки тому

    thanks alot, this was very helpfull!

  • @nicolydandara9753
    @nicolydandara9753 3 роки тому

    Awesome content, keep rocking

  • @belkocik
    @belkocik 3 роки тому

    What if I got dynamic data in English on GraphCMS and I'd like to display it in other language? I need to add another column in my GraphCMS Content System to my existing conent: Author, Blog and then apply a locale (for languages e.g. 'en' 'fr'), change the GraphQL API query and what next? That would be a good tutorial video about it :)

  • @nishantjha9113
    @nishantjha9113 3 роки тому

    How can I get the language headers persisted even when I change the page?

  • @lucasreghini8944
    @lucasreghini8944 3 роки тому +1

    Unfortunaly if u want to create a static site (SSG) you could not use i18n.
    well, i dont know if exist other way to use i18n, but i18n doesnt support next export.
    " i18n support is not compatible with next export. (SSR - NextJS 10) "

    • @leerob
      @leerob  3 роки тому

      You can still use SSG with i18n, which is what I'm doing in this video!
      You just need to use `next start` instead of `next export`.

    • @lucasreghini8944
      @lucasreghini8944 3 роки тому

      @@leerob really mna??? Great, this is awesome.
      And work in the same way???
      Like this:
      "deploy": "npm run clean && npm run build && next start -o dist/",

    • @lucasreghini8944
      @lucasreghini8944 3 роки тому

      Or i need to do something more? config next.config or something?

  • @MarjoForcado
    @MarjoForcado 2 роки тому

    My question is. Where can I get your shirt?

  • @csi9915
    @csi9915 3 роки тому

    damn good!!!! more updated tutorials make more newcomers to learn and try out next.js!

  • @lashatatu
    @lashatatu 3 роки тому

    wow finally managed to do it

  • @razorjhon2622
    @razorjhon2622 Рік тому

    what if i render languages from database ?

  • @evans8245
    @evans8245 2 роки тому

    What's your theme in this video ?

  • @annasamoylenko3804
    @annasamoylenko3804 3 роки тому

    Thanks,cool video)

  • @tunayuzbayyelce3455
    @tunayuzbayyelce3455 11 місяців тому

    Thanks a lot!

  • @luisricardolatorre6704
    @luisricardolatorre6704 3 роки тому

    Could you talk about motion and transitions?

  • @alienpadilla9963
    @alienpadilla9963 3 роки тому

    Is there a way to make the translate without change the path?

    • @Ca-rp7bv
      @Ca-rp7bv 2 роки тому

      yes if you set different domains per language on your next.config.js

  • @neeshsamsi
    @neeshsamsi 3 роки тому +2

    What's your theme ??

    • @leerob
      @leerob  3 роки тому

      Sorcerer! leerob.io/uses

    • @neeshsamsi
      @neeshsamsi 3 роки тому

      @@leerob Thanks!

  • @diegocueva4141
    @diegocueva4141 Рік тому

    Please update with layout and pages. App. :)

  • @OnceUponKid
    @OnceUponKid 2 роки тому

    fuck! the best tutorial ever

  • @haritssyah7434
    @haritssyah7434 3 роки тому

    Thank You

  • @АндрейМалахов-л2р
    @АндрейМалахов-л2р 3 роки тому

    Great guy

  • @tszhong0411
    @tszhong0411 3 роки тому

    NICE!!!!!!!!

  • @gianmarcodelfreo
    @gianmarcodelfreo 2 роки тому

    thx bro

  • @Ginold
    @Ginold 3 роки тому

    yeeah but if i have 20 languages i'd have to import them all -> this could hit hard the end user that doesn't need the 19 other languages.

    • @leerob
      @leerob  3 роки тому +1

      You should use getStaticProps to fetch only the current language needed. This was just a simple example!

  • @BenZekriNBENZ
    @BenZekriNBENZ Рік тому

    Interesting

  • @stefansdev
    @stefansdev 3 роки тому

    Pls update chrome, its bothering me :D

  • @tannedstone3736
    @tannedstone3736 Рік тому

    6:43

  • @code.design
    @code.design Рік тому

    How comes you do not talk about the slug translation? How to translate and redirect to the correct translated page?