We have a nextjs project (non app), version 14.1.4, where we just started integration of plasmic in an existing code base. We build a simple static component in plasmic and want to integrate this into an existing page.
The init code for plasmic is:
export const PLASMIC = initPlasmicLoader({
projects: [
{
id: process.env.NEXT_PUBLIC_PLASMIC_ID!, // ID of a project you are using
token: process.env.NEXT_PUBLIC_PLASMIC_TOKEN!, // API token for that project
},
],
preview: false,
});
If we set preview to “true” everything renders perfectly and fetches the last changes in plasmic. But if we set preview to “false” it does not fetch the latest published version of the component. It does not matter if we set or remove the “version” line above. In all cases the page just shows “loading…” where the component should be.
The code on the page is copy paste from the examples:
// Statically fetch the data needed to render Plasmic pages or components.
export const getStaticProps = async () => {
// You can pass in multiple page paths or component names.
const plasmicData = await PLASMIC.fetchComponentData('Deal/Project/FAQ');
if (!plasmicData) {
throw new Error('No Plasmic design found');
}
const compMeta = plasmicData.entryCompMetas[0];
// Cache the necessary data fetched for the page
const queryCache = await extractPlasmicQueryData(
<PlasmicRootProvider
loader={PLASMIC}
prefetchedData={plasmicData}
pageRoute={compMeta!.path}
pageParams={compMeta!.params}
>
<PlasmicComponent component={compMeta!.displayName} />
</PlasmicRootProvider>
);
return {
props: {
plasmicData,
queryCache,
// ...
},
// Using incremental static regeneration, will invalidate this page
// after 300s (no deploy webhooks needed)
revalidate: 300,
};
};
// Render the page or component from Plasmic.
export default function MyPage(props: { plasmicData: ComponentRenderData; queryCache?: Record<string, any> }) {
const router = useRouter();
const compMeta = props.plasmicData.entryCompMetas[0]; // Component one (Deal/Project/FAQ)
return (
<AppPage page={PageComponents.ACCOUNT} pageIsFullWidth showFooter={true}>
<PlasmicRootProvider
loader={PLASMIC}
prefetchedData={props.plasmicData}
prefetchedQueryData={props.queryCache}
pageRoute={compMeta!.path}
pageParams={compMeta!.params}
pageQuery={router.query}
>
<Box sx={{ height: '800px' }}>
<PlasmicComponent component={compMeta!.displayName} />
</Box>
</PlasmicRootProvider>
</AppPage>
);
}
Probably we missed something in the setup, but I simply can’t figure out what is missing. The project has mutliple published versions, with and without tags.