I’m also having the Error: NextRouter was not mounted.
On Next 13.1.6, @plasmicapp/loader-nextjs": “^1.0.232”
I’m trying to fetch some CMS data thru data component with on a static page.
It was working fine last week, but know it’s throwing this error and the data component is fetching on the client side instead that on the build side.
The index.jsx
import Head from 'next/head'
import { Inter } from '@next/font/google'
import {
PlasmicRootProvider,
PlasmicComponent,
ComponentRenderData,
extractPlasmicQueryData
} from '@plasmicapp/loader-nextjs';
import { PLASMIC } from 'plasmic-init';
import type { GetStaticPropsContext } from 'next'
const inter = Inter({ subsets: ['latin'] })
export async function getStaticProps({
previewData,
}: GetStaticPropsContext) {
const plasmicData = await PLASMIC.fetchComponentData("Home");
if (!plasmicData) {
throw new Error("No Plasmic design found");
}
console.log(plasmicData)
const compMeta = plasmicData.entryCompMetas[0];
const queryCache = await extractPlasmicQueryData(
<PlasmicRootProvider
loader={PLASMIC}
prefetchedData={plasmicData}
pageParams={compMeta.params}
>
<PlasmicComponent component={compMeta.displayName} />
</PlasmicRootProvider>
);
return {
props: {
plasmicData,
queryCache,
},
};
};
export default function Home(props: {plasmicData: ComponentRenderData; queryCache?: Record<string, any>,}) {
const {plasmicData, queryCache} = props;
const compMeta = props.plasmicData.entryCompMetas[0];
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<PlasmicRootProvider
loader={PLASMIC}
prefetchedData={plasmicData}
prefetchedQueryData={queryCache}
pageParams={compMeta.params}
>
<PlasmicComponent component={compMeta.displayName} />
</PlasmicRootProvider>
</>
)
}
The data component I use in Plasmic :
import { DataProvider, usePlasmicQueryData } from '@plasmicapp/loader-nextjs';
import { ReactNode } from 'react';
import { createClient } from '../prismicio'
import { PrismicPageListType } from './PrismicPageList';
export default function PageDataProvider(props: { children?: ReactNode; page: PrismicPageListType }) {
const { children, page } = props;
const data = usePlasmicQueryData(/${page}, async () => {
const client = createClient()
if(page === "categories" || page === "peintures"){
return await client.getAllByType(page);
}
return await client.getSingle(page);
});
return (
<DataProvider name={page} data={data}>
{children}
</DataProvider>
);
}
The way it’s declared
PLASMIC.registerComponent(PageDataProvider, {
name: "Page Data Provider",
props: {
children: 'slot',
page: {
type: 'choice',
options: PrismicPageListArray
}
},
providesData: true
})
