Implement Localization

React Bricks stores page translations as localized versions of the same page.

In code, you usually need to:

request content for the current language
read available translations for language switchers
configure framework routing so localized URLs resolve correctly

For the editor workflow, see Localization.

Fetch localized content

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

When retrieving content without specifying a language, React Bricks returns the default language.

usePagesPublic

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

See usePagesPublic.

fetchPages

The fetchPages helper function can specify a language in the options object.

See fetchPages.

usePagePublic

The usePagePublic hook has slug and language arguments, so you can request a specific translation when more than one page has the same slug.

See usePagePublic.

fetchPage

The fetchPage helper function has slug, apiKey and language arguments, so you can request the translation you want.

See fetchPage.

Page translations

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

Each translation includes the language, slug, page name, status, edit status, lock state and scheduled publishing date.

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

type Translation = {
  language: string
  slug: string
  name: string
  status: PageStatus
  editStatus: EditStatus
  isLocked: boolean
  scheduledForPublishingOn: string
}

Use translations to build language switchers and link users to the matching localized URL.

Next.js Pages routing

Next.js Pages projects can use Next.js built-in internationalization routing.

React Bricks starters with Next.js Pages are pre-configured to use i18n routing. Add languages to the locales array in next.config.js:

module.exports = {
  i18n: {
    locales: ['en', 'it'],
    defaultLocale: 'en',
    localeDetection: false,
  },
}

To fetch localized content in Next.js Pages, use the locale from 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' } }
  }
}

Next.js App and Astro middleware

createI18nMiddleware makes i18n routing easier to manage in Next.js App and Astro projects.

Use it when your project has localized routes and you want middleware to resolve the correct language before rendering.

If the same Next.js App project also uses A/B Testing, use createWithAbTestingMiddleware to chain A/B Testing with i18n middleware.