Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.
Builder content link
Builder public api key
fd2fab869b6342598809d4af1f4ac419
What are you trying to accomplish
I’m passing my color palette as a data prop into <BuilderComponent /> as follows:
<BuilderComponent
content={content}
model="page"
data={{ palette }}
context={{ palette }}
/>
I’m passing context too because I’m not sure of the difference, but data works on its own too.
This works perfectly when I’m viewing the site on localhost (both built and dev), or with the preview link on the deployed site using “View current draft”
However, these styles are not applied on the deployed site. The text style I’m applying this variable to has no color applied on the deployed site.
Here’s the deployed site (colors not applied):
https://pr-45.d2yqwjo13e4ks5.amplifyapp.com/builder-demo
Here’s the deployed site, draft link (colors applied):
https://pr-45.d2yqwjo13e4ks5.amplifyapp.com/builder-demo?builder.space=fd2fab869b6342598809d4af1f4ac419&builder.cachebust=true&builder.preview=page&builder.noCache=true&builder.allowTextEdit=true&__builder_editing__=true&builder.overrides.page=b40f827785ba456497490655ee81eee8&builder.overrides.b40f827785ba456497490655ee81eee8=b40f827785ba456497490655ee81eee8&builder.overrides.page:/builder-demo=b40f827785ba456497490655ee81eee8
Am I doing something wrong, do I need an extra step to get this working outside of localhost and draft mode? I’ve followed the documentation and everything works nicely except on the deployed site.
Thank you 
Screenshots or video link
Code stack you are integrating Builder with
Next.JS 13.4
Reproducible code example
builder.tsx component:
'use client';
import { useTheme } from '@aspire/ui';
import { BuilderComponent, useIsPreviewing } from '@builder.io/react';
import { BuilderContent, builder } from '@builder.io/sdk';
import DefaultErrorPage from 'next/error';
import '../builder-registry';
interface BuilderPageProps {
content?: BuilderContent;
}
// Builder Public API Key set in .env file
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
export function RenderBuilderContent({ content }: BuilderPageProps) {
const { palette } = useTheme();
// Call the useIsPreviewing hook to determine if
// the page is being previewed in Builder
const isPreviewing = useIsPreviewing();
// If "content" has a value or the page is being previewed in Builder,
// render the BuilderComponent with the specified content and model props.
if (content || isPreviewing) {
return (
<BuilderComponent
content={content}
model="page"
data={{ palette }}
context={{ palette }}
/>
);
}
// If the "content" is falsy and the page is
// not being previewed in Builder, render the
// DefaultErrorPage with a 404.
return <DefaultErrorPage statusCode={404} />;
}
