Introduction to Next.js 10's Internationalized (i18n) Routing

hey how's it going everyone it's lee halliday and in this video we're going to cover next gs 10's new feature internationalized routing so we can have websites that work in multiple different languages and an easy way to sort of manage the routing between the different um the different languages this is something i did a couple years ago before this feature existed obviously and i had to do it with a with a custom express server running within nextgs and it was a nightmare this is so much easier i wish this existed a couple years ago so the first thing we're going to do to get this up and running is to go to this uh very bare bones next js app i have and go into the next dot config.js file so in here we need to set up some configuration to tell nextgs what languages we want to support and you do that by adding in an i18n which stands for short form for internationalization and we tell it what locales we want so in this one we're going to have english espanol and francais and the default locale is going to be english now next.js supports two different ways to handle sort of which locale it's going to use it supports path-based routing which is what we're going to do today and you can also set up different domains so when it sees that domain it will do say french a different domain will be english and spanish etc but we're doing path based routing so i'm going to start up this app i've done a commit prior to starting the code so if you want to follow along i'll link to that in the description below so now that it's up and running we can just go to this home page and start to add the functionality so the first cool thing to point out and something you don't have to do at all is that next.js will automatically add the lang and then en or es or whatever to your html tag for you so you don't have to do anything anything about that and right out of the gate we can go to any of the locales we set up so we can go to slash yes and so what this is doing is it's serving up our home page still but it's serving up the spanish version so obviously it still says home so we have a little bit of work to show different text based on um what language the user is viewing it in but you can see down here lang.e lang is es now so we could we could go to french if we wanted but let's go to i don't know what gb is but it's not a language we support so it gives the 404 page which is what you'd expect so let's try to figure out how to get access to what locale the user is browsing the site in in our code and we're going to do that by popping over to the index which is the home page and the way you get the locale is actually through the router so what we can do is we can say const locale and that is equal to use router the hook that comes with nextgs and if we were to just pop out home with the locale that is what would show up on the page so we have es here now they have um so we could why don't we just say uh current locale is that they have another thing you can grab which is what are all of the available locales so we can just ask for the locales here and why don't we display them and iterate through them so we can show how to link to different to the same page but in different locales so maybe above the h1 we'll have a nav and in the nav we'll have a ul and we're going to iterate over the locales so we're going to map them i'm just going to call them loc so i don't have a same variable as this one up here and in here we will show an li with the loc and because we're mapping we need this key set up so with that in place we now see the different locales we have available for the user and we can link to different ones by using link so this is the built-in link component that comes with nextgs and the way link works is you need to tell it in href so we're going to go to the home page so we'll set up the a tags around loc but right now it would basically just they all link to the same place so if you don't pass anything it links to that page but in the current locale that you're viewing it in so how do you switch to a different locale you can tell the link hey go to this locale when the user clicks in so now en goes to the home page without a locale and that's because it's the default one es takes you to es french takes you to french so that's how you can basically handle routing and accessing the locale within next yes the next thing i wanted to do is sort of when you're you've got a website that's available in multiple languages we have to do this a lot in canada because we have english and french as official languages so we often have to build websites in english and french and there's a couple different types of content that you have to have available um some is like hard-coded text that you'd have in your code like this word current locale or something like that um other is data that comes from your backend which maybe comes from the database or whatnot we don't have a database but i'm going to sort of create a backend endpoint where i'm going to load some content that changes a little bit depending what language we're in so we're going to use use swr for this and what we're going to do is we're going to ask for some data and that is going to come from use swr and use swr you can pass in keys so i'm actually going to pass in a key that is the locale and then just the word hello and that way whenever the locale changes it will tell swr to to go refresh with with the new locale and we need to create a loader function so we're just going to call it load data and we will implement that here above so cons load data is an async arrow function that's going to receive the locale because that's the first of this key that we're passing in and then we can use it is fetch to get a response so let's await fetch to fetch from api hello which is a page i have set up and we're going to pass some headers and we are going to pass the accept dash language header with the value of the locale so that will send up the request we're going to pass in the language that the user wants the content in and then we'll get the data from the response converted to json and then we'll return that so oh sorry we'll return the data i'm not going to get into displaying it in any sort of fancy way i'm just going to put in a pre tag i'm going to json.stringify the response so data null spacing of two close that off so it already works because that endpoint uh exists but it just always returns this name john dope so if we go and look at hello you can see it's a very simple it's just returning name john doe so what i can do is i can get the locale from the request.headers and accept language and if it's not there we'll just fall back to english and because this is just a demo normally maybe you'd pull from the database in a different way depending on the locale that the user sent in i am just going to embed the locale within the response so that we can see that it's coming back in different languages so john doe ian john doe es etc so i'm on french so i'm seeing john doe french switch to spanish it makes another request to the back end to get the new content in that language english etc so that's the first type of data basically external data that's coming from an api a rest or graphql you're loading it from your database and you're having to load it in the language that the user wants it in the next form that we're going to cover is that hard coded content that just lives sort of in the template so we will maybe switch this current locale text and we'll just put the word name so maybe what we want to do is instead of always saying name we're in french now this would be nom if we're in spanish to be nombre so we want to load the correct name in whatever language the user's in so nextgs doesn't do this out of the box you'll need to use another tool to sort of accomplish this but it works really well together with the tools that you can do this so we're going to use one called react intel internationalization and the first thing to do for this to work correctly is we need to create a provider for it so i'm going to go into the app that wraps itself around every single page level component and i'm going to use the international provider that comes from this package so we'll just paste that in there and we need to pass a couple things to this we need to first pass what locale do we want our content available in so remember that comes from the router so now we have that and this also wants the messages so i'm just going to create a very simple like translation messages maybe you would be loading this from an external api or maybe you'd have them in separate files somewhere but i'm just going to create messages where we have english for name is name french for name is nom and um spanish for name is uh nom dre so with the messages in place we'll grab the correct translations for the locale that we're in and now our provider has is providing these translations to the rest of our app so nothing should have changed yet but if we go back into our home page we can use this use intel hook to load the translations so we're going to say const is equal to use intel and this gives us a function called format message they have other helpers for formatting dates and numbers and different locales we're to use this one format message and we're gonna short form it to f so that it's a little bit easier to call so now what you would do instead of just saying that the text name you would have to call the f function and the way that this one works is you pass an object with the id of your translation so we want it to translate the key of name and that will return the the correct one in the language you're in so you can see here i'm in spanish it's nombre french is nom now over to english and its name so what we've done here is we've um thanks to this new internationalization support we can now support different languages very easily in the url it automatically allows you to add sort of the length the locale and then the page to your path so imagine you had a page called about js and it was a export default function about which returns a div that says about cool let's imagine we had this page so we could go to slash es slash about or you could go to english or it also works without a locale in here in which case it will just show whatever the default um the default locale is set up so that's how the route based um uh international internationalization or i18n works out we also saw how you might load data by passing the locale to the back end so that it can load it from the database in the correct language and we saw how to use the package react intel to load translations within our app where we have sort of all of the translations set up somewhere now this is a real pain to maintain look localized websites are really hard to create and maintain because you might not know the languages so you have to work with a translation team pass them all over to them in some format they fill it out you have to get them back into this system so it can be a real pain but it's sort of the only way to manage this sort of application that's available in multiple languages that's it i hope you enjoyed the video take care bye

Channel: Leigh Halliday

Views: 5,213

Keywords: nextjs i18n, nextjs internationalized routes, nextjs react intl, react i18n

Id: DM3S-PXXQLQ

Length: 14min 6sec (846 seconds)

Published: Wed Jan 06 2021