If this article helped you in some way, consider donating. If you encounter an error, you can leave your issue there too. I also provided the link to the complete project repo on GitHub, in case you want to see the complete code. You can create content for many languages and let the user choose one to use in your site.Ĭomments, suggestions and questions are welcome, leave it below. I believe that now we already have a very functional example of a multilingual website using Next.js. With the code presented here, the creation of the pages is fully automated and based on this structure. Next.js 10 Internationalization (i18n) Today we are going to have a look at the new Internationalized Routing feature in Next. These will receive the markdown files in the directories for each language supported on the website. To better organize the files, I created a directory called /content in the root of the project, and in it another two: posts and pages. Import export default SitePageĮnter fullscreen mode Exit fullscreen mode Here is the code for the Header component: If you fell from another dimension and did not see the two previous articles and nothing makes sense to you until now, I warned you at the beginning of the article! Go there and check the previous articles, and then come back here! The files are: the Header component and the LanguageProvider language context. Small modifications to only two files are needed. Language switcher options section features the Preserve URL arguments option. The logic used here does not differ from that of a theme change, the change is that language will be saved instead. Many use it to make simple authentication or to save options, such as light and dark modes, for example. Local Storage is a way that JavaScript provides us to save information in the user's browser, so that it will be available on a next visit. Fortunately, it is not difficult at all to implement, with just a few lines of code. We also set the language in use in the globally accessible mlrLangInUse variable. We do this by looking at the first object in the mLstrings and use the Object.keys() method to create an array from the keys in the object. ![]() Then we create an Array of the possible languages. ![]() This behavior is not the best, so it is important to solve this issue. Next we var the HTML element in case we want to update the lang attribute. ![]() But when the page was refreshed, it returned to the default language, which caused a certain annoyance. In the previous articles, the function for changing languages was implemented. In this article, I show you how we can create such functionality. However, some commented that it would be interesting to add translated slugs, for example: in English the "about" page open at /en/about and its corresponding Portuguese version open at /pt/sobre. The page name is the value with index of 2, so that’s what we grab. In the previous section, we dealt with the creation and listing of content for the languages and ended the project there. If you ended up here for this third part and did not see the first nor the second, I highly suggest you take a look at those first.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |