Crash Course Into Multilingual Websites With next.JS and Headless Content

So, let's take a look at the presentation. I hope you can see that. So, today, I want to talk to you about multilingual websites with Next.js and headless content. What does it mean? First of all, let me introduce myself. I'm Andrey. I'm a developer evangelist at content.ai. We're a headless CMS, or modular content platform, as we call it these days. And why I picked a topic like that is because our website at content.ai is built with Next.js. We've been working on it for the past year. Before that, it used to be a Gatsby site for two years. So, we've kind of gained a lot of knowledge during that time. And I wanted to take the opportunity and, you know, try to give some of the experience and the knowledge that I gained from building that site to you so you can save some time. Because we're always short on time. So, that's what I do. And today, apart from showing you how Next.js works, I want to tell you a bit also how Next.js handles the multilingual part of the website. Now, a little bit of a housekeeping as well. The workshop is recorded. So, you can always go back and see what I did. The workshop is built in a way that you can do things with me. Yeah? Because when I show you something, tell you not to do anything, when I'm an attendee, I always do something during that time. So, you can feel free to do anything you want. You can just do it with me. If there are any questions, now, the workshop is not hard. It's rather an intro level. So, if there are any questions, feel free to drop me a line in chat or drop me a line on Discord. I can always go back and re-explain some topics. It's pretty much the basics. But if you haven't seen Next.js yet, you're maybe working with another platform or another framework, it's probably not going to be that easy for you. So, just don't be ashamed to ask. We're probably beginners. It's perfectly fine. I'm really happy to go back and re-explain some stuff again. Right. So, that's that. The code, I will give you the code in form of a GitHub repository. I will also share the final code with you. So, you can take the final solution and retrospectively go back and see how things were implemented. So, no worries there. We're here to have fun and to learn something. So, today's agenda. This is the website that we'll be working on today. You see, it's a very simple tail end template. So, I'm always trying to go the easiest route here. And it lists conferences. So, these are the conferences that we as content.ai are part of this fall. So, we're starting with React Advanced. There are some other conferences you'll see on the website. This is just so we have some kind of content and something to display on the website. So, this is how it's going to look like. And I think we can start with the agenda and what's going to happen today. So, first of all, we're going to import content into your CMS project. Now, there are two ways you can go through this workshop. First of them is you register for a free developer plan at content.ai. And you can import the content into your own project. Or I'll share my project ID with you and you can use mine. Yeah? It doesn't matter which one which way you want to go. Both are possible. I'll take you through both options. Regardless of what you choose. Next, when we have the content in the project, we'll generate strongly typed TypeScript models. We're going to take the content that is or the content types that are in the CMS. We're going to generate models into our code base so we don't have to write them manually and still work with strongly typed models in TypeScript. Then we're going to implement a rich text resolution on the website. First of all, we need to have a site so we can make it multilingual. This is going to be one step towards making the website a bit more dynamic. We're going to implement the listing index and listing detail pages. This one will be for the conference list and for a detail of the conference. So, we're going to look at get static props, get static paths methods so that you're comfortable using those. Then we're going to add two new languages in both code and the CMS. Now, multilingual websites, a lot of developers are scared from them. But it's not only the implementation. A large portion of the multilingual websites happen on the server where you manage the content. So, we're going to do both. Then we're going to adjust the data fetching queries that get the data into our project to respect the use of local. And we're going to add context to our language switch so when you switch between languages, the context of the web page that you're on stays the same. And that's it, I think. That's the plan for the next two hours. Now, it looks a bit more complicated than it is. I'm sure it's going to be fine. Now, let's start with some important links and the most important link is the GitHub repository. Let me take the link and I'm going to put it in the chat so I don't have to write it from my screen. But I have to first figure out how to get rid of the Zoom panel. This worked. Right? So, let me just put it there. GitHub advanced workshop 2022. So, I put it both in the chat and on Discord. So, this is where all the data for the workshop are. It's not just about the code of the website, but there is also a file called links.txt where you'll find all the other links that will appear in the presentation. So, everything is there. There is also a file called workshop.pdf where this is the presentation that I'm showing you converted into PDF. If you want to get a page back or page forward, it's perfectly fine to do that in that PDF. And there is a content.zip package that we'll need to import the content into the CMS. So, can you someone please confirm that you can access the repository? I made it public. But hopefully GitHub is not yeah, you can. Okay. Perfect. All right. So, that's the first important link. Another important link is the content of AI registration. I'm going to put this link in the chat as well. I think just this one is fine. If you're not logged in, it will take you to the registration section. Anyway, so, let me just put it there. Obviously, when I go there, I'm going to get right into the application. Because I'm already logged in. This is not the right project. But we'll sort that in a second. But let me open a private window. I think this should take us to the registration. Right? So, you just click on join here. And provide your email, password, and create your account. No credit card is needed. Just your email address. Maybe some additional info. And you should be able to go through that quickly. And get right into the app. I think the project was called conference blog. Perfect. So, what you see when you register, again, if you don't want to register, it's fine. I'll just share my project ID with you. You can work in VS Code. You can work with that project ID. If you want to register, I'll give you a few minutes to do that. When you do register and see, you know, get into the app, you're probably going to see an empty screen. I already have some content here. But if you just see an empty screen, that's fine. I'm going to show you how to import content into that project in a moment. And of course, while you're registering, you can also clone the repository. Because we're definitely going to need that codebase. So, there's the command git clone and the URL of the repository. This will also get you the content.zip package. This is the one right here. All right. I'll give you a few moments to do that. I already have the repository prepared in here. So... Of course, if you have any questions, feel free to put them in the chat or in Discord. All right. So, let's get started. All right. So, let's get started. All right. Anybody ready to move on? Or let me ask this way. Is there someone who's still registering or still cloning, needs more time? Okay. I think we're good. Then, of course, if you do need some time, then let me know. We can always wait a little longer. But if you already have the repository, that's a first good step. Now, we can move on to the first step out of six, actually. To get the project up and running. So, what you have now is the repository that is Next.js. It's using TypeScript. It's using TSX files. It has a bunch of files prepared that are just .backup so they don't get compiled. But we should be able to get this up and running quickly. So, first of all, this is what I already showed you how to do. I'll give you the project ID in a second. Now, if you did create your own account, you're going to need these two things. Project ID and management API key. You'll find these two things when you go into the application and you go into project settings. There is a menu item called API keys. So, here you'll find the project ID. And a little bit further down is the management