Internationalization (i18n) in NextJS apps using next-intl

hi everyone and welcome back to my youtube channel if this is your first time here my name is tillian and on my space here i simplify topics around there from tools to libraries to frameworks to everything about the browser and in today's video i'll be explaining how to go about internationalization in next.js applications and i'll be using this library next incl so let's get started internationalization is a very important aspect in web development especially when you are creating applications that serve people all around the world not everybody has english as their primary language and when you want your content to be understood by everyone or a very wide audience then you have to provide extra translations to your website such that they can also digest what your website or what your software offers and that's why internationalization is very necessary the next year is out of the box we have internationalized routing and what this means is you can configure your next js app without any extra library such that for fr um the fr part you would want this to serve french translation so if you have fr slash about or fr slash contact this will serve the french translations and if you have maybe en here this will have english and you can have the same for spanish and any other language that you want your application to offer but next gs does not do the translation for you you would have to do the translation yourself and that's where we need all of these libraries that internationalized routing support and like i said we'll be using next intl so without next intl look at looking at the defaults or looking at the basic configuration for adding these i 18n features to your site you have your module.export in your next.config and then you have your i18n property and this property you have different properties in the object you have the locales these are the languages that your site supports so when you have en slash us that means this would your website would have something like my website dot com slash en us and then every other thing that follows and that's the same thing for fr nl and then you can also set the default locale and when you say the default locale if you leave it as english then you don't always have to do my website dot com slash enus you can just do my website dot com i need to use the default locale and you can also configure your look internationalization to support domains in the sense that when you have example.com you would want the locale for that to be en us and when you have example.nl you want the default locale to be nl and when you have example.fr you want the default locale to be fr but for this tutorial or for the explanation in this video i'll be using parts which is slash fr slash nl slash whatever language you want it to be so let's see how to get started with this library and then set up a basic nexus application using internationalization features i have this basic application set up with create next app which is a library for scaffolding a basic nexus project and next intl app so when you run this command this will install the necessary dependencies for your next intl app and then you can change your directory to this now when i run npm run dev the development server and over here so you can see it is a basic nexus app and this is the home page with links to different resources now if i try to go to fr which should be a part for internationalized i get this error this page could not be found because nextgs assumes that fr is a page whereas it's not supposed to be a page so this means we'll have to configure our next gs to support internationalization so over here in vs code i would have my next.config.js and just as we saw in the documentation i'm going to expect an object of which this would be one of the keys and then i'm having my locales for my site i'm just going to support english and french which is en and fr you can also go as far as having it full but fr is a shorter convention and for the default locale i'm going to have english and that's all there is to it after making changes to the next config i would have to restart the server again and over here i would refresh now on refreshing you can see that this page serves as the home page and this page serves as the home page so this part here is going to serve as a french translation now how do we have all of these things translated to french that is where we need next intl so back in the terminal i'm going to install next into back here as we can see how the library works we can see how to use it but let's first start with the installation so over here after installing it then we have to add a provider for our next application so in app.js which is the first component that every react every next gs page uses i just going to have next's provider and [Music] next provider and this accepts a prop called messages and these messages is going to come from the page props and i'm going to call these messages and that's not all yet i would have to go to a page now say index.js and looking at the documentation here on every page i would have to export the get static props function which would retrieve the locale from the url which is configured by nextgs remember i told you nextgs handles the locale but this libraries handles the translations so the locale will be coming from the uh the context provided by nextgs i'll copy this and just below the home page i would export this i also have to create my translations so out instead of calling these messages i'll call this lang and this is the folder here so i'll create an en dot json as you can see back here you have your end.json you create adjacent objects here and then you use the use translation hook to pick one of the keys the top level keys from this object and then you use it for your translations so going back here i'm just going to have these and i'm going to call this home this and then welcome welcome to next js so back here i'm going to do like this so once the locale is en from our config here remember in our config we have en and fr so once our local is en this will go to lang slash en dot json which is this and then i can go back to this okay this is not typescript i have to remove this part and then i can go here and have my translations use translations and i'm going to have this as home i have to import these imports use translations and over here i can just take off this line and have t welcome remember in the enj scene we have welcome under this home object we have welcome so here i can do this as t and welcome and over here okay since we are on the fro part we do not have a fringe translate we do not have an f out or json so that's why it's not working but when i take off this fr see welcome okay something is missing see okay yes this is react see welcome when i refresh and now you can see we have welcome to next gs and now we're going to create a french translation so i'd have fr.json and this is how we are going to do it so remember in the home page we had a t this is it here we have c use translations for the home property and then we have a t welcome so this means in our fr dot json we're going to have a similar object just like this with the same keys and the only thing that's going to change is the translations so i'm quickly going to use google for this translate from welcome to next yes i'm going to pick this this i'm going back in our application for the home page we have these and when we have the slash fro we have this bmv and use or next gs and that's it for this tutorial you can keep going on and on you can add more keys here and even over here you can see we can make use of variables so username will be inserted having this username object yes username will be inserted into this so this video is just to show you how to translate so if you are building applications for diverse users then you have to ensure translations are in place and remember this is not restricted to french if you stay in a place like nigeria you can have translations for yoruba you can have translations for hausa for different things all you have to do is create your next config to serve a path like hausa and then everything in this page you create translations for that page so if you like this if you learnt from this and you found it helpful kindly like kindly subscribe and kindly share

Channel: Dillion Megida

Views: 739

Keywords:

Id: uDXyk1ZgLK0

Length: 12min 11sec (731 seconds)

Published: Mon Jun 28 2021