Next.js Internationalization with next-i18next and Internationalized Routing (Full Walkthrough)

hey guys this is david and today we're going to learn how to set up internationalization with a next js app to do this we're going to be using a very popular open source internationalization library called i18 next you've probably heard of it and we're also going to be able to use next js's uh new internationalized routing feature which was released sometime i believe last year um it's a really great feature that we can use in tandem with i18 next very well so let's go ahead and get started so all i've done so far is generated a pretty boilerplate next js app using the create next app npm package it's just a single home page at on index.js and it looks just like this here it's just some static content that we will be editing so the first thing we're going to do before setting up i 18 next is just setting up next internationalized routing so internationalized routing is a feature that comes built in with next it just gives us a way to manage our routes for different languages so the first thing we're going to do is go to next.config.js and configure this so in here we're going to start with a property called i18n and it will contain an object with two other properties in it the first one will be locales and this is a list of languages that you want your app to support so i want mine to support english you'll put the language code in here and the other language i want to support is swedish so the language code for that is sv and then the next property we're going to be adding is one that's called default locale and i'm going to set that to english so the default locale is kind of like your fallback locale meaning if someone came to your app with their browser settings set to japanese or another language that we don't support it will fall back for them to our default locale which will be english so the first thing you want to do anytime you edit your next.config.js file is restart your server so let's go ahead and do that and let's go ahead and check how we access what page or what locale our user is on so the way that we access the language that our user is using is through the router object from next so the way that you access that is through get static props or through get server side props but we're going to be using get static props here so i'll say export function get static props and we'll return an object with props that will be passed into our component here so if you're not too familiar with getstatic props i'd recommend reading up on it but i'm just going to assume you do so all we have to do is take the locale out of here the locale is passed into an object and get static props and we'll just say locale so now our get static props will pass the locale as props into our page components so if i put props here we can actually render what locale we're on um to the screen just by doing something like uh put a h2 tag here and say props dot locale locale there we go now when we go to our app we should see our language so um my default language is english and also my browser language is set to english so i'm on the english route uh if your user came to your app in swedish which is another language that we support then they will see this route here the they will automatically be directed to the slash sv route for swedish and uh your page will know that you are on the swedish language based off the locale prop that we passed in so that's what internationalized routing does for us it gives us routes to different languages so that we could use this language to render the proper translations to our page and it automatically redirects users based off their browser language to the correct route automatically so if you want you could just use this locale that we pass in and conditionally render the correct translation based off that locale but that's what i18 next does for us so that's why we're going to be using that so let's go ahead and install i18 next so i'm going to npm install and we're going to be using next i18 next it's a version of i18nx specifically written for nexjs so let's configure i18 next first thing we need to do is add a configuration file to the root of our app this will be called the next i18next.config.js and here it'll be very similar to the next.config.js we're going to do module.exports equals and we're going to use the same exact i18n object we did in next.config.js because i18next also needs to know which locales and default locale that we're using so it's quite annoying if you want to add another language or change any of these values you have to do it in two different places so a quick way to handle that is to simply import from next iet next config into the next config so i'm just going to delete this from the next.config.js and i will import it from our other file like this so i'm going to import it from next itunes.config and then we can simply use it just like that so now we're only managing these languages in one place instead of two the next step we need to do for setting up i18 next is editing our app.js file so here we're going to use a higher order component that we get from iot next called app with translation so we'll import it it's called app with translation from next i 18 next and then we're going to wrap our app with that higher order component app with translation maya so this is just the last bit of configuration we need for i18 next um the app with translation higher order component will provide the i18 next instance to all of our pages through my app and we'll pass it in as props you don't really need to understand it too much this is just a piece of the configuration that you need to work with next i18 next so now that we have i18 next configured the next step is to actually render different translations to our page depending on the language the user is using um so next item next expects all of your translations to be in different json files inside of your public folder here now that is certainly one way to do it if you want to manage a bunch of different translation json files and then one day send them off to a translator to go and translate them but there's a much better way to do it now and that's through an app called i 18 nexus so let's go to our browser go to i18nexis.com sign up for a free account real easy i've already signed up so let's go to my dashboard and your dashboard will look just like this asking you to add languages to your project the first language here is your base language so this is going to be the same as your default language that you added in your next.config.js so that's going to be english for me and then add any other languages that you added to your locales list in your config so in our case i only added swedish so i'm going to search swedish there it is and you could really add as many languages as you want but since we just have these two in our next js app right now i'm just going to work with these two at the moment so let's go to our project here and this is the page we're going to be adding all the strings that are going to appear in our app so the first thing we're going to take a look at is the name spaces drop down up here so iet next uses what are called name spaces to separate your strings into different files depending on page or type of string it's really up to you how you want to use name spaces you could even use one namespace one namespace for your entire app if you really wanted to but with next iet next it's convention to create one namespace per page in your app so that means all the pages in your pages folder here in our case we only have one index.js which is our home page and it's also convention to create another namespace called common for all the common strings in your app so that would be for all the general strings like okay or cancel things you see across multiple pages so first thing we'll do here is rename this default namespace that it nexus gives us and we'll call it common so this will be our common namespace and then like i said we're going to add one namespace per page in our case there's only one page and we'll call that home so now that we're in our home namespace let's go ahead and add our first string to our home page so we click add string we get three different uh fields here the first one is the key and this will be used um to just reference this string in our code so the user is not going to see this this is just for your own reference so i'm gonna create a key called welcome message um so this string will be just a string that welcomes users to our app the value which will be rendered to the user will say welcome to my app and then lastly we have the details um we're going to leave this blank it's really used for when you get to the point that you're inviting professional translators to edit and translate these strings you can give them more detail into what this actually means but i think this is pretty straightforward they'll understand so let's click save so now that we've added our first string we can actually click this little drop down arrow here and see that iat nexus automatically translated it to swedish for us using google translate if we had other languages that we added to our project it would have also translated to those languages as well so this is really cool because now we can actually see what our app would look like in other languages prior to going out and hiring professional translators to do that for us so if you were editing the json files yourself inside of your project directly you would just have empty strings for all these other languages so this is a really cool way to automatically see what it could look like in other languages first so now let's go ahead and connect these translations to our app so i'm going to go to the exports tab here the exports and versions and here we have three different tabs for different libraries and frameworks so for react iet nexus actually has an api that you can hit to receive json of your strings for a specific language or namespace but with next.js since we're dealing with more of a static website and it's less of a single page application it's much better performance to actually download your strings to your application for next js so we're going to be doing that so if you wanted to you could just click this download button download all the json files and drag them into your public folder here for iot next but there's a much better way to do it with the iit nexus cli to just download it for us so you can see here it gives us a nice little snippet that we already wrote for ourselves but if you hadn't written this yet you could just copy this and paste it in there but what we're going to do is npm installed the itinx's cli and then just run the simple command to pull with our api key which is also up here and it will pull those strings to our project so we can bundle our translations with our project so that next doesn't have to go retrieve them when your users are loading the page it's much better if we bundle them with our app so let's go to our terminal and we will npm install the iet nexus cli we do that globally you usually want to install cli at a global level and then we will immediately after that pull our strings using the pull command with our api key for this project just like that and make sure you are in your project directory directory when you do this because it downloads directly into your public folder so this is the exact structure that next it next expects it expects your json files for your translations to be inside of your public folder and another folder called locales and then inside of there we have a folder for each of our languages and inside of each of these folders we have the namespaces as json files so if we look here at home.json in our english folder we will see our english translation if we go to our swedish folder to the home json file we see our swedish translation so let's render our translations to the screen so what we're going to do now is import a function in our home component called server side translations and we're going to import that from next i18 next server side translations and according to the docs it's best to import it from next iet next slash server side translations just like that so the server side translation function was designed to be used inside of get static props so you're going to be using this instead of get static props on every page level component so we're going to be using it on the home page what it does is it basically takes the locale takes the name spaces that are required for this page and it fetches all those strings from your json files using iit next so let's see how that works we're going to be using the spread operator and then calling it with the weight server side translations just like that and the first argument here is the locale that we're getting passed in by getstatic props and we're also going to pass in the namespaces required for this page specifically so um we're going to be using our home namespace um if you had other namespaces that had strings on this page as well you'd include them here but um having this array just prevents you from having to load all of your translations for all of your pages um if your user's just loading this page right now and of course the last thing we have to do here since we're using a weight is put async over here all right so now that we have our server side translation function set up uh we have all of our translations ready to render to the page so what we're going to be doing now is importing a hook for rendering our translations and that hook is called use translation we're going to import that from next i t next and when we use this hook we are provided a function that allows us to pass in a key and get the correct translation based off of our locale so what we're going to do is destructure out that function from the hook like so so the function is called t you structure it out that way so now we have this function t that we will pass in our strings key as the first argument and we'll go ahead and render it here so let's just delete this other default welcome message and add our own so we're going to call t and when we pass in our key which in our case if you recall is welcome message um first thing we need to do is type in the namespace that it's inside of which is home and you put a colon like that and then the key like so welcome message and one other thing i'm going to do is delete this props.local that we were looking at earlier all right so let's go ahead and save that let's go and start up our server and yeah not start run div and now let's check out our app there it is welcome to my app so our string has been rendered to the page using the english translation because my browser language is set to english if we wanted to see it in swedish or any other language that we support just put slash sv at the end and boom there it is our translation that iet nexus generated for us with google translate and it is ready to go so if any swedish user visits your app they will automatically see be redirected to the slash sv route and view all of your app in swedish so it's kind of important to understand the difference between what next js is giving us with internationalized routing versus what iet next is doing so um this slash sv here that's completely generated by next js when we um configured all of our language inside of the next.config.js so it will automatically handle all the routing with slash sv if a swedish user were to click a link on this page to go to another page in your app it would retain the sv and just put the rest of the path afterward and then all that i18 next is doing is it's reading this value here and rendering those proper translations to the page for us so there's definitely a little more detail that we could go into as far as what if the user has their language in swedish but they want to change it manually themselves by a drop down or something like that you can take a look at the next js docs under internationalized routing and they'll show you exactly how to do that we won't go over that in this tutorial but it's worth taking a look at later so now we have an internationalized nexjs app for swedish and english and we also get this awesome google translate feature from iot nexus so um i definitely recommend taking a further look at iot nexus for just managing your translations down the line as well um google translate obviously isn't always 100 you always want to bring in professional translators when you go to production so itunes also makes that pretty easy you could basically just go here and add your translators to your project and what your translators would basically see is this ui here under you can view it under translator view they just get a big list of all your translations and they can edit and confirm them and let you know when they're done so that's obviously a much better way than just emailing them a bunch of json files and hoping them they retain the same structure and didn't mess anything up so this is definitely the way to go and i highly recommend it anyway i hope this tutorial was very informative and you learned a lot and feel free to leave any questions in the comments and we will see you next time

Channel: i18nexus

Views: 938

Rating: 4.7419353 out of 5

Keywords: localization, i18n, i18next, nexti18next, reactjs, react

Id: UwzN8R6h9-U

Length: 18min 12sec (1092 seconds)

Published: Mon Aug 02 2021

Reddit Comments

[u/bestjaegerpilot]

praise: 1st, really awesome video. Hats off to you :-)

question: to clarify, besides the routing that nextjs does, the client does *not* wait for a translation to load? The loading of translations is done on the server?

question: if you're using nextjs, you likely care about performance. How does the client-side bundle size compare to linguiJS (5kb)?