Modeling staging and production as separate environments in croct.json5
Setting up Croct for our two ecommerce brands and I want to get the environment model right from day one. The main requirement: experiments running on staging must never mix their traffic into production analytics.
Questions:
- How does croct.json5 model environments? I see dev and prod mentioned in the generated file but I am not sure what actually separates them.
- How do the Next.js env vars map to each deployment target? We deploy staging and production from the same repo on Vercel.
Want to set this up once and not migrate data later
1 answer
The environment model supports exactly this isolation:
-
The croct.json5 configuration file declares applications per environment (dev and prod) within a workspace. Each environment has its own application ID, and that ID is the isolation boundary: staging traffic reported against the dev application never mixes with production data. Slots and experiences are shared at the workspace level, so you configure content once and test it safely against the dev application before it sees real users.
-
On Vercel, use environment-scoped variables: set NEXT_PUBLIC_CROCT_APP_ID to the dev application ID for Preview deployments and to the prod application ID for Production. Each deploy then talks to its matching application automatically, no code branching needed. Do the same for CROCT_API_KEY since each environment has its own keys.
That is the whole setup. There is a related discussion with more detail on the workflow side in Separate dev and prod environments.