i18n isn't easy, but with careful planning of your content model I'll show you how to structure the setup, authoring, and querying of localized content. Covering whole-or-part translated documents, the difference between market and language-specific content, ways to author that in a CMS like Sanity, and ways to query for it on frontends like Next.js and Remix.
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
AI Generated Video Summary
I'm going to talk about localisation in the real world and how Sanity, a platform for structured content, focuses on content as data and flexible internationalization. Sanity allows for multiple languages in different markets, providing customization options for content visibility based on location. The platform offers a flexible approach to content creation and customization, allowing organizations to internationalize their content based on their specific needs. With Sanity's query language and the brand new version of Sanity Studio, developers have more flexibility than ever before.
1. Introduction to Localisation
I'm going to talk to you about localisation in the real world. I am from Sanity. Sanity is a platform for structured content. It means that you can customise your CMS experience to be anything you want to. We say that content is data. And what does that mean? Well, let's unpack that by saying what the opposite is. So you've built a website like this, I've built websites like this. And back in the day when I used to sling WordPress websites, you would have said, what is the content model of this page?
♪ React Jingle ♪ If at any point you find my talk boring, you might want to pull up your phone here and take a photo of that QR code. You can book yourself a demo, get a look at Sanity, get an understanding. Otherwise, you can have a listen to me over the next few minutes.
So good day everyone in the room and a big hello internet, to everybody on the live stream. My name is Simeon Griggs I'm a Solution Engineer at Sanity.io. And I come here today with two goals in mind.
Two, one, I'm going to talk to you about localisation. And I want to bring, because I know it's been a long day already, I am going to bring the energy of a thousand exploding suns to localisation, because I know it's a topic that just excites people. To no end, but two, I do have an ulterior motive, I am a narcissist and I am obsessed with conference speaker photos. And I'm really hoping that there's some photographers in the room. And I just want to make sure that I... ... ...leave with a bit of that thought leadership sort of style. So I'm hoping somebody captured that or maybe there's something a bit better.
Well, it looks like I'm doing an open mic night holding my mic today. I'm going to talk to you about localisation in the real world. I am from Sanity. Sanity is a content... It's not a content management system. It's a platform for structured content. It means that you can customise your CMS experience to be anything you want to, if you want to make a validation rule on a document that you need to solve the day's wordle in order to publish it, you can do that. You don't need to, but you can. And we say that content is data. And what does that mean? Well, let's unpack that by saying what the opposite is. Who listens to podcasts at 1.5 speed? Because I figured there's going to be enough of you that you're going to be able to hold up if I keep talking like this for the whole time.
So you've built a website like this, I've built websites like this. And back in the day when I used to sling WordPress websites, who used to build WordPress websites for a living? Yes, my people. And back in the day you would've looked at this and you would have said, what is the content model of this page? And you would've said, Simeon, the content model for that, sir, is a page. And you would have made a file called template-course.php and you would've made that as a page. And the lessons would have been child pages of that page.
2. Content as Data and Internationalization
But that's content as presentation. Sanity focuses on content as data. And if you're still doing WordPress, I don't know, they're all blocks or something now but it's not right. So let's look at this website again. This is made up of disparate pieces of content that are connected, but we don't have to focus on the presentation of it as a website. It just happens to be in a website. This is content. This is course data, presenter data, label data, lesson data, and most importantly of all for today's topic, this is language data. And language data is really important because that can be internationalized differently based on that content.
So as a solution engineer, a lot of my job is presenting Sanity to customers that we have, but the great thing about how flexible Sanity is as a content platform is that our customers tell us how they're doing things. And so a lot of the rest of the talk here is showing how our customers are showing how they have done internationalization in our software. The problem is, I can't tell you any of their names, so I have to just talk in weasel words, kind of. So this internet connected speaker company that uses Sanity, they do key value pairs. So if you've done localization, sanity, you've probably done this sort of thing already. This is looking at a Google Translate plugin that we have so you can type content in one language and have that automatically be translated into multiple other languages. And you can set up key value pairs. So usually you'd store that in JSON. You can give your content teams a content editable version of that.
3. Multilingual Content Creation and Customization
There's a particular German fitness brand that extends the model with markets and languages. Sanity allows for multiple languages in different markets. A multinational conglomerate with 75 market-specific websites in multiple languages uses Sanity. A Swedish music streaming company also uses Sanity, with 22 languages and custom markets. Markets can be created by content editors to customize content visibility based on location.
There's a particular German fitness brand that we also work with. They extend the model. They've got markets and languages. Some markets have multiple languages. Some markets have a single language. No two markets might have the same language, but they can still provide the same experience in here. So not every market is creating the same content, but markets are creating content in multiple languages. And you can do all of that in sanity. And you can set that up how you like. And this is an administrative view. But they're able also to have that inform their user roles and permissions. So now a Canadian author who logs in only sees their content, even though it's all administered from the one data set.
Is everyone feeling exhausted with the way that I'm talking? It's probably too much. So this multinational conglomerate does the same thing, but they're in like 75 markets in one data set. 75 different market-specific websites with multiple languages, all from one data set, all from one Sanity project, plus global content. People are able to reach into another data set and origin to another market and pull content in and be able to translate their own version of that. So he's like the global version with the markets as well. And that's, this is that thing about reaching out that I talked about.
And then this particular Swedish music streaming company that happens to use Sanity that you probably can't guess who it is. They use 22 languages, custom markets. Like, markets aren't in code. They're content editors able to create markets. If they want to say this line of text can only be seen in countries where this particular plan is available, they can do that from one document. And here it is. So there's a lot to unpack here. Let's go through it very quickly, and I'm almost done. I swear this thing is flashing at me, but I'm almost done. They offer all of their market-specific content in one document. And so here we've got some Norwegian content, some United States content. If we have a look at that from the United States, we only see that content.
4. Content as Data and Flexibility
We store content as data and have our own query language. Internationalize your content based on your organization's needs. Check out our demo and the brand new version of Sanity Studio. It's never been so flexible. There's never been a better time to be a Sanity developer.
This is because we store content as data. It's because it's an array of objects, that text. If we have a look at the Norwegian version, we're filtering that out. And we're not overfitching, fetching, overfetching sounded like a kiwi there, overfetching and then filtering it back out. We are doing this at the point of query because we have our own query language as well. You should come and ask us about that.
So number one, content is data. I am embarrassed to try this, but I'm going to do it anyway. Let's do a call and response. I say content. You say is data. Content. Content. It worked. Internationalized content by its domain. Don't let us tell you how to internationalize your content. We can show you best practices, but you're able to do it how it makes sense to your organization. Which is kind of this point. Localize how you should. Localize how you should work, how you need. I think I wrote that one. I'm responsible for it.
Anyway, so if you want to have a look at that demo, if you still got your photos out. Photos out, cameras out. Have a look at the demo or come and see us at the booth afterwards. One more thing. Sorry, I thought I was done, but I added these slides very recently. We just launched the brand new version of Sanity Studio. Version 3. Can your CMS do this? Now the whole CMS is just a component that you can load into any React application. So at the conclusion of all these lightning talks in the next break, run, don't walk, to the Sanity booth and we'll show you Sanity Studio inside of a Remix application that you can put it wherever you like. It's never been so flexible. There's never been a better time to be a Sanity developer. There's never been a better time to set up a... I was going to say a headless CMS but I'm not allowed to say that. A platform for structured content. Thank you.