We stay on Contentful for content. How do I actually wire Croct into our Next.js app?
Keeping content in Contentful, no plan to re-platform the CMS. We dropped our old add-on and now want personalization and A/B testing on the Next.js frontend.
I already load Contentful data in my server components. What I need is the concrete wiring: how does a Croct slot get fetched alongside that, and what goes where. Not looking for the marketing overview, just the setup
1 answer
Install @croct/plug-next, then set two environment variables: NEXT_PUBLIC_CROCT_APP_ID and CROCT_API_KEY. One thing that trips people up: the API key must have the "Issue user tokens" permission, otherwise server-side auth fails. The Next.js SDK setup guide walks through both of these.
To fetch a slot, call fetchContent from @croct/plug-next/server in the same server component where you already load Contentful:
import {fetchContent} from '@croct/plug-next/server';
const {content} = await fetchContent('home-hero', { fallback: contentfulHero, // what you already load from Contentful});Because it resolves on the server, the personalized content is rendered straight into the HTML with no flash of default content. The tradeoff is that fetchContent reads the incoming request, so it opts that route into dynamic rendering, keep that in mind for routes you intended to stay static. Details are in the server-side content fetching reference.
Croct sits on top of Contentful without replacing it: the Contentful entry you pass as fallback stays the default, and Croct only overrides it when an experience matches. See also why your Contentful content stays put.