This example showcases Next.js's Static Generation feature using Builder.io as the data source.
https://cms-builder-io.vercel.app/
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example cms-builder-io cms-builder-io-appyarn create next-app --example cms-builder-io cms-builder-io-apppnpm create next-app --example cms-builder-io cms-builder-io-appnpm install @builder.io/cli -g
Signup for Builder.io, then go to your organization settings page, create a private key and copy it and supply it for [private-key] below. For [space-name] create a name for your space, such as "Blog"
cd cms-builder-io-app
builder create -k [private-key] -n [space-name] -d
This command when done it'll print your new space's public api key, copy it and add as the value for NEXT_PUBLIC_BUILDER_API_KEY into the .env files (.env.production and .env.development)
BUILDER_PUBLIC_KEY=...
npm install
npm run dev
# or
yarn install
yarn devYour blog should be up and running on http://localhost:3000! If it doesn't work, you can post on GitHub discussions.
To try preview mode at any time while editing in Builder.io press view current draft, if you changed the secret defined in constants.js you'll need to also change it in your Post model settings.
To exit the preview mode, you can click Click here to exit preview mode at the top.
You can deploy this app to the cloud with Vercel (Documentation).
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.
Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local file.
Alternatively, you can deploy using our template by clicking on the Deploy button below.