Skip to content

Latest commit

 

History

History
95 lines (63 loc) · 3.72 KB

README.md

File metadata and controls

95 lines (63 loc) · 3.72 KB
Raw

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 or Yarn to bootstrap the example:

npx create-next-app --example cms-builder-io cms-builder-io-app
# or
yarn create next-app --example cms-builder-io cms-builder-io-app
# or
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.

Deploy with Vercel

Related examples