Pass locale into symbol Content component

Bugs
1

Hello,
I’m using NextJs and the component.
I’m trying to pass the locale to the page symbols by setting “Inherit state” to true but it seems the symbol is not translated.
Also the targeting doesn’t seem to work

chrome_d0CD2nGvFu
chrome_d0CD2nGvFu1920×911 251 KB

2

Hello @etienne,

Welcome to the builder.io forum post.

Make sure you’re correctly passing the locale as a state parameter to the BuilderComponent . Here is an example setup:

import { BuilderComponent, builder } from '@builder.io/react';
import { useRouter } from 'next/router';

// Replace with your Public API Key
builder.init('YOUR_API_KEY');

export default function Page(props) {
  const { locale } = useRouter();

  // Fetch content based on locale
  return (
    <>
      <MyHeader />
      <BuilderComponent
        model="page"
        content={props.page}
        data={{ locale }}
      />
      <MyFooter />
    </>
  );
}

export async function getStaticProps(context) {
  const page = await builder.get('page', {
    options: { locale: [{ value: context.locale }] },
    userAttributes: { urlPath: context.asPath },
  }).promise();

  return {
    props: {
      page,
      locale: context.locale,
    },
    revalidate: 1,
  };
}

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: true,
  };
}

For more details, refer to the Localization Integrate Guide and Targeting Cheatsheet.

3

Thank you for your answer