61f56f997c
4.3 KiB
A statically generated blog example using Next.js and Builder.io
This example showcases Next.js's Static Generation feature using Builder.io as the data source.
Demo
https://cms-builder-io.vercel.app/
How to use
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example cms-builder-io cms-builder-io-app
yarn create next-app --example cms-builder-io cms-builder-io-app
pnpm create next-app --example cms-builder-io cms-builder-io-app
Configuration
Step 1 Install the Builder.io cli
npm install @builder.io/cli -g
Step 2 Generate a space
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=...
Step 3 Run Next.js in development mode
npm install
npm run dev
# or
yarn install
yarn dev
Your blog should be up and running on http://localhost:3000! If it doesn't work, you can post on GitHub discussions.
Step 4 Try preview mode
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.
Step 5 Deploy on Vercel
You can deploy this app to the cloud with Vercel (Documentation).
Deploy Your Local Project
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.
Deploy from Our Template
Alternatively, you can deploy using our template by clicking on the Deploy button below.