Next.js 10 Internationalization (i18n)

hey everybody welcome back to another video about next.js 10. today we're going to talk about internationalization which is the process of translating your app to different languages i'm going to show you the new built-in features like the different routing strategies the automatic local detection and then we're going to translate an existing website with a complimentary open source package called next translate so let me just sit down and let's get started i'm here on the next.js website and if you just go to docs and you go to advanced features and you scroll all the way down you're going to see internationalized routing so next.js now has built-in support for internationalized routing since version 10. before version 10 there was really no support whatsoever so this is uh really cool that they've built they've now had a built-in support um it's not complete internationalization support it's just routing but that's already a very important part so with this routing support you can just add a third-party library like any of these and you know get complete support so now let's look at how you configure that in your next config.js file you're going to add the i18n key and then in there you can specify a list of locales in this case we've got english french and dutch and you tell nexjs your default locale and then you really have to decide between a local strategy okay so there's sub path routing and there's domain routing and what this means is that with subpath routing next.js puts the locale in front of your path name as you can see right here it doesn't do it for the default locale so in this example right here the default one's english so slash blog is going to be the english page slash fr slash blog it's going to be the french one and this is going to be the dutch one this is really easy really straightforward i like it a lot but if you want or if you need different domains for your page you also got domain routing the domain routing strategy and this one just redirects your users to different domains right so if they have configured english in their browser they're going to go to example.com if you got french they're going to go to example.fr and dodge example dot nl and within a domain you can even specify like sub path routing or at least redirects so dutch as spoken in belgium is going to be redirected to the nl page and then your urls are going to look like this example.com blog it's going to be english example.fr blog is going to be french obviously and example dot nl slash nl-be slash blog is going to be dutch but dutch as spoken in belgium okay i haven't quite figured out what you're gonna do with cookies for example if you're using um domain routing because imagine if somebody signs in on example.com and then they go to example.fr they're not gonna be they're not gonna have access to this cookie right because it's on a different domain so if you unless you have a really good reason to use domain routing i just i just would avoid it especially if you look at what big companies are doing so if you just go to apple.ch ch stands for switzerland you get redirected to apple.com ch and then you choose a language okay um same with samsung so if you go to select say samsung.fr we're gonna get redirected to samsung.com fr so they are using um subpath routing but if we go to amazon.de for germany they actually got a dot de um website and i think with e-commerce it's just more trustworthy if you actually use dot de in germany you know people are gonna trust your your e-commerce a bit more but if you don't really sell anything or you don't have a really good reason to do that then uh subpath routing is gonna be just fine and i would actually default to that now another really cool feature of next js is the automatic local detection so when a user visits the application root to just the home page of your website next chairs will try to automatically detect which locale the user prefers based on the accept language header and the current domain okay so i've got this little example application here we're going to have a look at this one later if i just open up dev tools and we're going to filter by document and here we got the request to localhost we can see that in the request headers we got this exact accept language header and your browser actually sends this one for every single request it's doing okay and in here it's just a list of languages that i prefer so i've configured my browser to use english as the first one then if english not available we're going to go to german then french and then italian so in my settings here chrome settings you can search for language and then you get the well your language configuration and in there you can configure what languages you like best so just sort them based on preference usually chrome does it does it automatically users are not really going in there and configuring their languages but if this is set up correctly then nextjs can detect that and automatically redirect you to the proper either subpath or domain now just one thing before we get to programming down here it's got a little section about search engine optimization and well next.js now automatically handles the lang attribute on the html tag so you don't need to worry about that what you do need to worry about is the hreflang meta tag and this is basically a meta tag that tells search engines like google that there's a different variant of your page and google can then decide which one it should actually show the user okay so if you want to learn more about this you can go to this link here i'm going to put it down in the description but for now we're gonna go and actually translate my little example application right here so what we got here is just a really simple website with just a home page that says hello world and about page that says my name is patrick and that's literally it that's that's all there is to it i've added the footer down here in blue and we're gonna then later on add a language switcher in there and it's gonna be really interesting so if you want to follow along i've i'm going to add some get clone and get checkout commands in the description and just pause the video right now if you want to follow along and go do that so the first thing we're gonna have to do is create a new next config.js file and in there we're gonna just copy paste uh this configuration right there and as locals we're gonna use english french and german because i don't actually speak dutch and default local is going to be english let's save that let's go to our terminal make sure we restart our development server because we changed the configuration and then what we can do here in our home page is use the next.js router and i guess we have to actually import use router from next router and what this allows us to do is now say greeting is equal to router dot locale so we can access the current locale right there and if that's um let's say english then we're just gonna have hello world but if router locale is um german we're going to have hello welt and if locale no router locale is french we're going to have bonjour le monde and otherwise just nothing okay so now we can just put this down here greeting save and now we're on the english one because that's the default one but if we add slash fr right there we get bonjour le monde and with german hollow welt so it works and the other really cool thing about it is that in layout i've added these two links to home and about links and they are just href slash and href slash about and now next js actually detects the current language and it's going to change these to include the prefix of your locale so you don't need to worry about this this one at all and it's just a really nice thing now we can also explore the automatic local detection so if you go to our browser right here and just say um german is going to be my well no let's actually choose french french is going to be my most preferred language and we're going to go to the application root here refresh next js is gonna automatically redirect us to french remember it only works on the root so if we refresh again here on french well we obviously are in french but if we move german up to the top and we are on french we're not getting redirected to german but if we are on the route it would actually redirect to german let me just put english to the top again and there we go now let me just really quickly show you how you can use this with get static props so let's export an async function called get static props and remember here we can return an object with our props that would then get passed to the default exported component so props right here is going to be this object and what we can do right now is just copy this greeting up there for you know exemplary purposes just choose locale because we get it actually right there so get static props gets a context object with a local property on it and you can destructure it right there and then you got access to the locale like you would here with user router but of course you can use this at build time so if you use a cms with local support you could actually pass in this locale to your cms and then get localized content like this i'm just gonna show you how this one works let's just re return this prop greeting and then in there you need to say props dot greeting if we save that yeah it actually works so french seems like it's working okay now let me just revert all of this because we're not actually going to be using that today now the next thing we're going to do is add a language switcher to the footer so we don't actually need to go into the url every time we want to change the locale and the way we're going to do this is by going to our layout component right here scroll down to footer actually no we need to import use router from next router again then use it right here and now what we can do is render an unordered list of router locales which is a string array and we can map over these and just for each one return a list item which just says local for now of course we're going to need to set a key like this then we just got a nice list of our locals and now we actually need to create links for each of these so what we're going to do is just go in there and create a link and the link um refers to the current page that we're on right because you could be on this about page and when you change the language you don't actually want to be redirected to the home page okay so router that ask path is the current path in your browser and i think if we save this these ones turn into links and you can now click that oh nope forgot one thing to actually change the language you need to pass the local prop right here to the link but now if we click it it goes to french and german and back to english it also works on the about page we have not translated this of course so this is not going to change but keep an eye on the url we're now on slash about now we have the french prefix and the german prefix so now let's go back to our index page and we're going to fix this nested ternary statement that we've got here because that's not really that's not how you're supposed to actually um well translate your page the thing is next.js does not have built-in support for anything that would help us with this so we're going to need to use a open source package and i've chosen this next translate package by this developer called aral roca and i've actually used this before even before next js 10. so before next js 10 you well you had no built-in support for localized routing so this package provided that and it was actually the only package that i could find that worked with static generation so it's really cool i they've now updated it to work with next.js 10. and we can actually use the 1.00 experimental version because it's got a bit a new api and i don't feel like making a video about the old api it's going to change in the next few weeks anyways so yeah let's just get right into it we're going to have to go to getting started and well first thing of course we have to add the next translate package to our project so in here we can install next translate i've added this version tag right here you probably don't need to do this if version 1.00 has already been released so just please check for that yourself and once it's installed we can run dev again then the next thing we need to do is move our i18n config to a separate file okay so right now we've got it in next config.js so we're gonna copy this one just create a file called a18n.json and add it in there let's just format it like this it's the same locales and default locale keys that you're used to from next.js itself and in here we can now do this you can get the necessary i18n config directly from next translate like this now we actually need to create namespace files okay so these files they contain the actual translations of our strings and you're going to need to have a locals directory and in there a directory for each one of your locales and then just json files in them so we're going to do this right now let me create a locales directory and add a en us directory with a common.json file and in there we can say greeting is translated to hello world now let me copy that and create a german one that says not hello world but hello hollow welt and then even french like this and now what we need to do is configure where are we here in the i18 and jason we need to say pages so we want that every single page includes the common namespace file so comments just going to be on every single one of your pages now on our about page we want a different json file to be included that's just going to be about json so we can specify this like that and then in there we're just gonna have about.json oops that's a folder let me just delete this one new file about json we're not going to do anything in there and just copy this right there and right there okay the the idea behind this is that you don't include unnecessary translations for different pages you just get the strings that you need for this exact page and nothing else you can even use um regular expressions here to say that every page that starts with slash about should include about you can read more about this right here in the config section under pages it's right there but for now i think that's all we need to do to get started and we can now go to our index page what you need to do is you need to import the use translation hook from next next oops next translate slash use translation and then instead of doing all of this you can just say let t equals use translation so this is t is a function that helps us translate um strings and we can use it in there and say greeting or colon greeting so common of course is the namespace and greeting is the key in your json file so now if we save this object is not a function okay that was weird anyway it's gone now and now french and german and it works pretty cool now as a last example let's translate the about page because currently that one's just um you know static and we're going to do the exact same thing we're going to import use translation right there then we're going to use the hook like this and the next thing we need to do is actually configure these keys so we want like title about us and in production um my name actually let's use variables right here my name is name and i'm years old so now we can go here and say translate namespace about title and down here so if we refresh this no actually english yeah so we get this and now as a second parameter we can pass in our name and our age let's not call it years let's call it h my name is patrick i'm 27 years old that's really nice just let's copy this over to german let's say right here upper mich alt and now german it works english german french french we have not provided any keys right it's just an empty json uh string so it just falls back to this okay i think that's it for this video um if you enjoyed this please make sure to leave a like and maybe i'm gonna do a second part where we look at more advanced use cases like loading localized content from my cms or maybe formatting dates in different locales and yeah please consider subscribing and i'll see you in the next one

Channel: Patrick M

Views: 13,205

Rating: 4.9921103 out of 5

Keywords: nextjs, next.js, nextjs 10, next.js 10, i18n, internationalization, internationalisation, translate

Id: Rbi52ZYtVKM

Length: 24min 32sec (1472 seconds)

Published: Sun Nov 29 2020

Reddit Comments

[u/fredsq]

nice one! I've seen a few sites using that next-translate package and had no idea. Very useful for a project I'm working right now! I'd be very interested in knowing the most efficient way to pull localised data from Contentful, for instance.

[u/Ophie]

What about translated paths? This is something that I don't see addressed anywhere. For instance, I would never have english paths for localized pages like how they present it in the nextjs docs, i.e. /fr/about/. One other thing that I miss is having the defaultLocale be prefixed just like the localized versions. There is a discussion and a PR for this feature.