Next.js 10: Internationalizing a markdown based blog!

in my previous video i showed you how to use next.js 10's internationalized routing feature with the next translate package so if you haven't already please make sure to watch this video and under that video ross commented that he would like to know how to apply this to blog pages so he sent me his repository and i've already got it forked here so the way he structured this is that if you go under source and posts you will see some markdown files and he's wondering how to translate them into different languages so if we open these markdown files up we can see that there's some metadata and then the actual blog post which is currently in english and he would like to translate them into a russian or any language for that matter so today we're gonna do exactly that all right so i got his project running here and if we just take a look at it it looks like this so he's got some experiments going on with next translate right there but what's actually interesting is this block at the end right here he's got two articles so let's go click on the first one and then it renders the markdown file which we looked at so this is gonna be uh no it's not this file it's this file so this markdown file gets rendered like this it's pretty nice the beauty of this is of course you can just add new markdown files and then you've got more blog posts but if you change it to russian you just get a 404 because there's no localization support for these markdown files as of right now and yeah i guess we're going to change that so first of all i want to just hide everything that's not you know concerning us so everything above here and the way we're gonna do this is by going into the index page and then just uh removing these sections or we don't need to remove them we can just comment them out and then in his layout component we also got to get rid of this is the head we gotta get rid of oops uh i guess all of that yeah that looks better okay so how does this actually work well in index we got a get static props function and in there we are returning props that um are a list of all your posts basically so we got date title and id that gets returned from this function and we can then create this list right there which is the one you are seeing here so get started post sata let's go into this one and now we are in library posts.tsx and i have not yet figured out well this is why this is called tsx because there's no jsx being used in here so this might just this can just be called posts.ts um and in there get sort of post data this function goes through the post directory so that's this one right here and it lists all of the file names so here we just got two and then for each one it replaces that md with nothing it just removes that md from the end of the name and then you got the post id and by id what they mean is right here in the url ssg ssr which corresponds oops to this file name so next thing that happens is it reads the markdown file as string so it reads the entire file and then it uses the gray matter npm package to parse the metadata section metadata section is this one at the top and then basically it's just returning the id along with the date and the title and at the end it's just ordering by date and then we get this array of date title and id which you can then use to render the list now we've got two options um we could have this pre-rendering file as a pre-rendering dot ru dot md version or dot any local for that matter and but i think it will get pretty cluttered in here so what i'm proposing is that we create a new folder pre-rendering um and that's the post id so then we can copy these two files in there and we're just gonna call it index.md and this one index.r u dot md now of course let's actually uh make sure that we can differentiate between the two files so let's just call it the russian content for now and then do the same for the other article ssgssr move this in there and call it index now if we give it a refresh it's not going to work because in get static props of our index page we're calling get sorted post data and in there we are assuming that we've got markdown files where we are removing the dot md from the name which is no longer the case because now we have folders in there so file names is going to be equal to pre-rendering and ssg ssr so it's no longer going to be necessary to remove the dot md to get the id so what we can do is just name this id i guess and this could just be post ids and this full path would then need to include the index.md at the end or index.ru so we need the locale somewhere so we need to get it in this function so let's say we can pass it in as a parameter and then in here we are getting a local from the context object and then just pass it right there now what this allows us to do is say file name is gonna be index.local.md and then this is a file name which is not going to work if it's english because if it if the default locale is english like in this case or doesn't need to be english but just a default locale it's not going to be an empty string it's going to be e and eus in this example so this would be wrong so now we need to somehow know whether or not this is the default locale and what we could do is we could read this i18n json file so let's go up here and say const i18n equals require i18n.json and from there we can destructure this default locale which then allows us to compare our locale to the default locale right there if that's the case it's going to be index.md otherwise index.local.md and then once we actually got the entire path um we can read the file and you know this stays unchanged but we're going to make sure that we keep our edge case in case in mind where we do not have a russian version of the article so let's actually make sure that this file exists by checking with access sync full path and if it doesn't we're just going to return which then would yeah we would then have undefined entries in this array so let's just we can just filter post post right there okay so english we got two articles if we switch to russian we get our one russian article and it's got the russian prefix right there because we added it into the title so i just came back from a short break and i thought we could actually translate this article on two forms of pre-rendering to russian instead of just you know adding russian to the title so i throw it into an online translator it gave me this i have no idea if it's correct but now this should actually say that if we go back to english it's going to be this one and you know the one that we just have in english now we need to fix the page that is displaying the blog post um let's just go to english and click on an article there we go it's getting we're getting an error that's expected so this is happening in this post dot tsx component and here we are displaying the blog post with react and down there we have two next js functions get static paths and get static props get static paths of course gets all the paths that then get put in here in this square bracket id and get static props actually gets the post data so it means it renders the html and passes that to the component up here which can then um set it on to this div so let's try to get this to work within get all post ids um well this is still assuming that we've got markdown files in here so we do not need to replace the md there which means we can just refactor this to say post ids and this would then be post id that's that and get post data is going to be the other one that's called in get static props so in there um same deal we now got folders instead of files so this id is gonna be needed in the full path right there and then we can just say index.md which should make it work it does but of course we have not added localization support just yet if we go to russian it's still not going to work because we've got this index.md hardcoded right there we need to make sure that we are properly localizing this get all post ids function because this is being used in getstatic paths and if we look at the docks right here it says that within getstatic paths if you use localized routing you need to provide the locale for each path that you're returning so in our case um this paths thing right here needs to need some work um what we can do is just say let paths is going to be an array then we're going to fill this and at the end we're just going to return it and since this is typescript we're going to need to type it so params is gonna be an object with id string and then locale it's just gonna be right there now we do need to load post ids that's correct and then we need to go through all these post ids and then actually we need all the possible locales that we got configured so let's just say low cost is going to be a string array let's get past get that gets passed into this function and then for let locale of locales um we gotta check whether or not it exists because this one does not have a russian version so let's go ahead and say um full path is gonna be path.join posts directory with id and then the same deal as this up here again we need to check if it's a default locale and if it is we're going to use index.md if it's not we're going to use index.local.md so that will be the full path and then if and if it does not exist this full path i'm gonna continue in the loop but if it does we will add it to paths so paths dot push and params id and locale because we've got local there id there yeah that should actually look good so let's save this and then down here we need to make this dynamic as well so we need the locale that gets passed in here and then same deal again we could we should actually put this into a function now we just need to provide loc all the locals to this function which we can destructure from our context object and then here we can just get the signal the current locale pass it in to there and that should have been it yeah there's our russian article and if we hit english we get the english article russian russian article okay so basically we are done now we've got the english site which has our two english articles and the russian website which is just a russian article the only thing that's left to do apart from you know refactoring our code here a bit um because we're using this full path on three separate locations you can just put it into a function but i'm not going to do that right now what i'm going to focus on is this date this is still english all right so we should actually make this work in or actually translate it to russian which is pretty easy um in our index.tsx page we got a date component that's displaying this date right there so if we open this up we can see that it's using date functions to format the date object and what we can now do is just import a different locale so we can import english first from date functions loca enus and then we're also gonna import the russian locale as an object right there and now we need to pass this to um the options of the format function so locale we just say local ru it's going to be always a russian and well we want to pass in the locale as a prop to this component let's do this right here this means that we would need to actually provide it to the component so not there but right here uh luckily we get locale from our router so we can just say locale equals local same on the id dot tsx which is when you have the post open like this we need the um locale from use router and then say locale local and now in here we can say if the past in local is equal to en us we want to use enus otherwise the russian object so now we got it english and if we go back home and choose russian it's going to change to russian and back to english all right that's it we have successfully added internationalization support to this block that ross provided us with so ross i hope i answered your question and to anybody else who's been watching um if you've got any questions just leave them down in the comments i'll try my best to answer them i will not be able to create a video on every single one of them but i can try and yeah if you learned something new please like the video and consider subscribing and hopefully i'll see you in the next one cheers

Channel: Patrick M

Views: 2,097

Rating: 5 out of 5

Keywords: next js, nextjs, next.js, i18n, internationalization

Id: RiC5YU5x1NA

Length: 19min 13sec (1153 seconds)

Published: Tue Dec 08 2020