Localization

React Bricks has built-in content localization.

You can add new languages in the Dashboard (accessible from the Settings tab), based on your plan’s limit. Then, you can translate content using the translation tabs in the Page Editor.

This section explains how to query content based on language and leverage Next.js’s built-in i18n routing.

With multiple locales, the React Bricks interface allows content translation for each page in any locale.

Settings

You can add / remove languages and set the default language at any time from the Settings tab.

Default language

The default language serves as a default or fallback.

For instance, page names on the left sidebar are shown in the default language if available. It is also the language used to copy content from, when a new translation is created.

When retrieving content via queries without specifying a language, the default language is retrieved.

Translate pages

To translate a page, click on the corresponsing language tab in the Editor.

If a translation doesn’t exist yet, React Bricks will ask you if you like to create one.

When creating a new translation, the content is copied from the default language.
If there is no translation for the default language, React Bricks will copy the content from the first available language.

Each translation is independent, with its own content, page attributes, SEO/meta, and custom field values.

Delete a translation

When you have more than one translation, you can delete a translation.

You can delete a translation when you have more than one.

Deleting a translation only removes content in that language, not the entire page.

You can’t delete the last remaining translation of a page: to remove it, you must delete the whole page.

Use the translations

Queries for page lists or single page content accept a language parameter, allowing you to request content in a specific language.

NextJS

Next.js has built in internationalization routing.

React Bricks starters with Next.js are pre-configured to use i18n routing.

Just add languages to the languages array in next.config.json:

module.exports = {
  i18n: {
    locales: ['en'], // Add your languages here
    defaultLocale: 'en',
    localeDetection: false,
  },
}

To fetch localized content in Next.js, use the context:

export const getStaticProps: GetStaticProps = async (context) => {
  const { slug } = context.params
  try {
    const page = await fetchPage(slug.toString(), config.apiKey, context.locale)
    return { props: { page } }
  } catch {
    return { props: { error: 'NOPAGE' } }
  }
}

Page and Translations

A Page object from the query hooks (usePagesPublic, usePagePublic) or fetch helper functions (fetchPages, fetchPage) has a translations field containing an array of available translations for that page.

Each translation has a language (e.g., ‘en’, ‘it’) and a slug (the page’s slug in that language).

Page

type Page = {
  // ...
  translations: Translation[]
}

Translation

type Translation = {
  language: string
  slug: string
}

Queries

usePagesPublic

The usePagesPublic hook has a language argument to return the published pages in the desired language.

See usePagePublic

fetchPages

The fetchPages helper function has the ability to specify a language in the options object.

See fetchPages

usePagePublic

The usePagePublic hook has arguments slug and language, so that you can specify the translation that you want to receive for that page, if more than one have the same slug.

See usePagePublic

fetchPage

The fetchPage helper function has arguments slug, apiKey, language, so that you can specify the translation that you want to receive for that page, if more than one have the same slug.

See fetchPage