Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands

Rate this content
Bookmark

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.

8 min
17 Jun, 2022

Comments

Sign in or register to post your comment.

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

Short description:

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

Short description:

Sanity focuses on content as data and allows for flexible internationalization. Language data can be internationalized differently based on content. Sanity provides the flexibility to internationalize things as it makes sense to the content. You can set up languages in Sanity using JavaScript, mapping over fields or documents to create language-specific versions. This single source of truth can be spread to your Sanity schema, plugins, translations APIs and services, and your Next.js or Remix routes. As a solution engineer, I present Sanity to customers and showcase how our customers have done internationalization in our software using key value pairs.

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 let's consider our presenter model. I've got a name, a title, and a photo. Now, only two of those things are going to change if I need to internationalize this document. My name is always going to be the same. My photo is going to be the same. So if I have multiple language versions in that document, I'm going to make multiple language versions of that field. And so if I'm looking at a lesson, well, all of these are text, so it wouldn't make sense to have all of these be localized versions in this document, we might as well just make localized versions of that document, and this is the sort of flexibility that Sanity gives you, is that you get to internationalize things, how it makes sense to the content, not how it makes sense to us. We don't tell you how to do language internationalization, because to us, everything's data. Language is the data. This is how you set up languages in Sanity, because everything's JavaScript, so it makes sense to a developer, right? You just map over fields, or map over documents, and create language-specific versions of those. And then this one config file can spread to your Sanity schema, to your plugins, off to translations APIs and services, off to your Next.js, or Remix routes, and it all just comes from this single source of truth that you check into GitHub, you deploy into the Studio. And that's localization in the real world.

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

Short description:

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

Short description:

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Workshops on related topic

React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up