Hi, I have a problems about deploying to multiple enviroments. I setup project as follow up the post (https://docs.plasmic.app/learn/multiple-environments/). But In production environment with tag: prod then:
• After build then that work correctly, only pages, UI (in version with tag prod) displayed.
• But when I changed somethings and tag version to “prod” then nextjs app (using revalidate each 10 seconds) not get (rebuild) new version
This is my config about plasmic init for prod env:
export const PLASMIC = initPlasmicLoader({
projects: [
{
id: '2oRfV6f7A9PcEzdRPmo2gR', // ID of a project you are using
token:
'xxxx', // API token for that project
version: 'prod',
},
],
// Fetches the latest revisions, whether or not they were unpublished!
// Disable for production to ensure you render only published changes.
preview: false,
[…catchall] components is here:
import * as React from 'react';
import {
PlasmicComponent,
ComponentRenderData,
PlasmicRootProvider,
extractPlasmicQueryData,
} from '@plasmicapp/loader-nextjs';
import {GetStaticPaths, GetStaticProps} from 'next';
import Error from 'next/error';
import {useRouter} from 'next/router';
import {PLASMIC} from '../plasmic-init';
/**
* Use fetchPages() to fetch list of pages that have been created in Plasmic
*/
export const getStaticPaths: GetStaticPaths = async () => {
const pages = await PLASMIC.fetchPages();
return {
paths: pages.map((page) => ({
params: {catchall: page.path.substring(1).split('/')},
})),
fallback: 'blocking',
};
};
/**
* For each page, pre-fetch the data we need to render it
*/
export const getStaticProps: GetStaticProps = async (context) => {
const {catchall} = context.params ?? {};
// Convert the catchall param into a path string
const plasmicPath =
typeof catchall === 'string'
? catchall
: Array.isArray(catchall)
? `/${catchall.join('/')}`
: '/';
console.log("Debug plasmicPath: ", plasmicPath);
const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
console.log("debug plasmic data: ", plasmicData);
if (!plasmicData) {
// This is some non-Plasmic catch-all page
return {
props: {},
};
}
// This is a path that Plasmic knows about.
const pageMeta = plasmicData.entryCompMetas[0];
console.log("Debug pageMeta: ", pageMeta);
// Cache the necessary data fetched for the page.
const queryCache = await extractPlasmicQueryData(
<PlasmicRootProvider
loader={PLASMIC}
prefetchedData={plasmicData}
pageParams={pageMeta.params}>
<PlasmicComponent component={pageMeta.displayName} />
</PlasmicRootProvider>,
);
console.log("Debug queryCache", queryCache);
// Pass the data in as props.
return {
props: {
plasmicData,
queryCache,
hideFooter: true,
hideHeader: true,
hideCtaButton: true,
},
// Using incremental static regeneration, will invalidate this page
// after 300s (no deploy webhooks needed)
revalidate: 10,
};
};
/**
* Actually render the page!
*/
export default function CatchallPage(props: {
plasmicData?: ComponentRenderData;
queryCache?: Record<string, any>;
}) {
const {plasmicData, queryCache} = props;
const router = useRouter();
if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
return <Error statusCode={404} />;
}
const pageMeta = plasmicData.entryCompMetas[0];
return (
// Pass in the data fetched in getStaticProps as prefetchedData
<PlasmicRootProvider
skipFonts
loader={PLASMIC}
prefetchedData={plasmicData}
prefetchedQueryData={queryCache}
pageParams={pageMeta.params}
pageQuery={router.query}>
{
// pageMeta.displayName contains the name of the component you fetched.
}
<PlasmicComponent component={pageMeta.displayName} />
</PlasmicRootProvider>
);
}