Ways to get localized content

Jan Cerman

4 minutes

0% complete

If you plan to display culture-specific content, your app needs to know how to retrieve content in specific languages.Depending on what you know about your content, there are a few ways to go about this.

Languages and localization

Each language in your Kontent.ai project is uniquely identified by its codename, which can be any string, such as English, en-US, or en-GB.

Your default languageEvery project comes with a single default language that cannot be removed. When you request content without specifying a language, Delivery API returns content in the default language.

Get content in a specific language

To get localized content from your project, specify the language using the language's codename. For example, to get an article named About Us in Spanish, specify the item's codename and the language's codename.

TypeScript

// Tip: Find more about JS/TS SDKs at https://kontent.ai/learn/javascript
import { createDeliveryClient } from '@kontent-ai/delivery-sdk';
import { Article } from './models/Article';

const deliveryClient = createDeliveryClient({
  environmentId: '8d20758c-d74c-4f59-ae04-ee928c0816b7',
});

// Gets a specific article in Spanish
const response = await deliveryClient.item<Article>('about_us')
  .languageParameter('es-ES')
  .toPromise();

What if the item doesn't exist in the specified language?The Delivery API checks the fallbacks of the specified language. If the content exists in the fallback language set for the requested language, you get the content item's content in the fallback language.

Get items by localized URL slug

Depending on how your app implements navigation and routing, you might want to request content items directly by their URL slugs. To retrieve a localized content item by its URL slug, you need to:

Specify the item's language using the language codename, such as es-ES for Spanish.
Filter by the URL slug element’s value.

This approach requires querying all items within the project and filtering the results. Because the filtering is done by the Delivery API for you, there is no performance impact compared to requesting a specific content item.

TypeScript

// Tip: Find more about JS/TS SDKs at https://kontent.ai/learn/javascript
import { createDeliveryClient } from '@kontent-ai/delivery-sdk';
import { Article } from './models/Article';

const deliveryClient = createDeliveryClient({
  environmentId: '8d20758c-d74c-4f59-ae04-ee928c0816b7',
});

// Filters all articles to find the Spanish variant by its URL slug
const response = await deliveryClient.items<Article>()
  .type('article')
  .languageParameter('es-ES')
  .depthParameter(0)
  .equalsFilter('elements.url_pattern', 'acerda-de-nosotros')
  .toPromise();

If the specified query doesn’t match any content items, the Delivery API returns an empty response.

Ignoring language fallbacks

If you need to ensure you get content in only the specified language, you can filter out the content items that are in another language than specified. This effectively bypasses any language fallbacks.For example, this is how you retrieve content items translated into Spanish without any fallbacks.

TypeScript

// Tip: Find more about JS/TS SDKs at https://kontent.ai/learn/javascript
import { createDeliveryClient } from '@kontent-ai/delivery-sdk';

const deliveryClient = createDeliveryClient({
    environmentId: '975bf280-fd91-488c-994c-2f04416e5ee3',
});

// Gets content items in Spanish without following language fallbacks 
const response = await deliveryClient.items()
    .languageParameter('es-ES')
    .equalsFilter('system.language', 'es-ES')
    .toPromise();

Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!