[examples] Add a statically generated blog example using Next.js and …

…Builder.io (#22094) A statically generated blog example using Next.js and [Builder.io](https://builder.io), demo on [https://cms-builder-io.vercel.app/](https://cms-builder-blog.vercel.app/)
vercel · Jan 12, 2022 · de54ad8 · de54ad8
1 parent 628e6ac
commit de54ad8
Show file tree

Hide file tree

Showing 67 changed files with 2,913 additions and 0 deletions.
diff --git a/docs/basic-features/pages.md b/docs/basic-features/pages.md
@@ -63,6 +63,7 @@ You can also use **Client-side Rendering** along with Static Generation or Serve
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok">Storyblok Example</a> (<a href="https://next-blog-storyblok.vercel.app/">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms">GraphCMS Example</a> (<a href="https://next-blog-graphcms.vercel.app/">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-kontent">Kontent Example</a> (<a href="https://next-blog-kontent.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-builder-io">Builder.io Example</a> (<a href="https://cms-builder-io.vercel.app/">Demo</a>)</li>
     <li><a href="https://static-tweet.vercel.app/">Static Tweet (Demo)</a></li>
   </ul>
 </details>

diff --git a/examples/blog-starter/README.md b/examples/blog-starter/README.md
@@ -38,6 +38,7 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 - [GraphCMS](/examples/cms-graphcms)
 - [Kontent](/examples/cms-kontent)
 - [Umbraco Heartcore](/examples/cms-umbraco-heartcore)
+- [Builder.io](/examples/cms-builder-io)
 
 ## How to use
 

diff --git a/examples/cms-agilitycms/README.md b/examples/cms-agilitycms/README.md
@@ -32,6 +32,7 @@ Once you have access to [the environment variables you'll need](#step-15-set-up-
 - [Ghost](/examples/cms-ghost)
 - [Umbraco Heartcore](/examples/cms-umbraco-heartcore)
 - [Blog Starter](/examples/blog-starter)
+- [Builder.io](/examples/cms-builder-io)
 
 ## How to use
 

diff --git a/examples/cms-builder-io/.env.local.example b/examples/cms-builder-io/.env.local.example
@@ -0,0 +1,2 @@
+# Copy this file as .env.local
+NEXT_PUBLIC_BUILDER_API_KEY=
diff --git a/examples/cms-builder-io/.gitignore b/examples/cms-builder-io/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/cms-builder-io/README.md b/examples/cms-builder-io/README.md
@@ -0,0 +1,93 @@
+# A statically generated blog example using Next.js and Builder.io
+
+This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Builder.io](https://builder.io/) as the data source.
+
+## Demo
+
+[https://cms-builder-io.vercel.app/](https://cms-builder-io.vercel.app/)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+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
+```
+
+## Configuration
+
+### Step 1 Install the Builder.io cli
+
+```
+npm install @builder.io/cli -g
+```
+
+### Step 2 Generate a space
+
+[Signup for Builder.io](https://builder.io/signup), then go to your [organization settings page](https://builder.io/account/organization?root=true), 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
+
+```bash
+npm install
+npm run dev
+
+# or
+
+yarn install
+yarn dev
+```
+
+Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, you can post on [GitHub discussions](https://github.com/vercel/next.js/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](./lib/constants.js) you'll need to also change it in your `Post` [model settings](https://builder.io/models).
+
+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](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+#### Deploy Your Local Project
+
+To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example).
+
+**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](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-builder-io&project-name=cms-builder-io&repository-name=cms-builder-io&env=BUILDER_PUBLIC_KEY&envDescription=Required%20to%20connect%20the%20app%20with%20Builder.io&envLink=https://www.builder.io/c/docs/custom-react-components#api-key)
+
+### Related examples
+
+- [WordPress](/examples/cms-wordpress)
+- [DatoCMS](/examples/cms-datocms)
+- [Sanity](/examples/cms-sanity)
+- [TakeShape](/examples/cms-takeshape)
+- [Prismic](/examples/cms-prismic)
+- [Contentful](/examples/cms-contentful)
+- [Agility CMS](/examples/cms-agilitycms)
+- [Cosmic](/examples/cms-cosmic)
+- [Strapi](/examples/cms-strapi)
+- [ButterCMS](/examples/cms-buttercms)
+- [GraphCMS](/examples/cms-graphcms)
+- [Kontent](/examples/cms-kontent)
+- [Ghost](/examples/cms-ghost)
+- [Blog Starter](/examples/blog-starter)
diff --git a/examples/cms-builder-io/builder/author/joe-public.json b/examples/cms-builder-io/builder/author/joe-public.json
@@ -0,0 +1,24 @@
+{
+  "createdBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2",
+  "createdDate": 1613015350978,
+  "data": {
+    "image": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2F6ae860242834453ea87d6057e7df9754",
+    "name": "Joe Public"
+  },
+  "id": "7b0b333bd44b4e91a6f4bf93158cb62b",
+  "lastUpdatedBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2",
+  "meta": {
+    "kind": "data"
+  },
+  "modelId": "6d30b724c93d4198b0c0ce2d3ce390dc",
+  "name": "Joe Public",
+  "published": "published",
+  "query": [],
+  "testRatio": 1,
+  "variations": {},
+  "lastUpdated": 1613031369279,
+  "rev": "0pjukbnd3ox",
+  "@originOrg": "8f6bae86bfa3487eb1a18f263118c832",
+  "@originContentId": "ba1fb5129adf4c379424d346666cc092",
+  "@originModelId": "c71bab5b43fa42eca870e330a39b59e0"
+}
diff --git a/examples/cms-builder-io/builder/author/johnny-doe.json b/examples/cms-builder-io/builder/author/johnny-doe.json
@@ -0,0 +1,24 @@
+{
+  "createdBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2",
+  "createdDate": 1613027534444,
+  "data": {
+    "image": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2F5df565e2c411421082123ea8c1084a73",
+    "name": "Johnny Roe"
+  },
+  "id": "d50fe8eced654b2dae22c738dbeabcee",
+  "lastUpdatedBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2",
+  "meta": {
+    "kind": "data"
+  },
+  "modelId": "6d30b724c93d4198b0c0ce2d3ce390dc",
+  "name": "Johnny Doe",
+  "published": "published",
+  "query": [],
+  "testRatio": 1,
+  "variations": {},
+  "lastUpdated": 1613067837951,
+  "rev": "0pjukbnd3ox",
+  "@originOrg": "8f6bae86bfa3487eb1a18f263118c832",
+  "@originContentId": "edcaddd1a70f494ba1955704cd88ca4f",
+  "@originModelId": "c71bab5b43fa42eca870e330a39b59e0"
+}
diff --git a/examples/cms-builder-io/builder/author/schema.model.json b/examples/cms-builder-io/builder/author/schema.model.json
@@ -0,0 +1,96 @@
+{
+  "helperText": "",
+  "injectWcAt": "",
+  "webhooks": [],
+  "showTargeting": true,
+  "sendToMongoDb": true,
+  "hideFromUI": false,
+  "showScheduling": true,
+  "name": "author",
+  "fields": [
+    {
+      "showTemplatePicker": true,
+      "helperText": "",
+      "type": "text",
+      "name": "name",
+      "noPhotoPicker": false,
+      "simpleTextOnly": false,
+      "permissionsRequiredToEdit": "",
+      "@type": "@builder.io/core:Field",
+      "mandatory": false,
+      "required": true,
+      "hideFromFieldsEditor": false,
+      "hideFromUI": false,
+      "model": "",
+      "copyOnAdd": true,
+      "disallowRemove": false,
+      "showIf": "",
+      "advanced": false,
+      "onChange": "",
+      "subFields": [],
+      "autoFocus": false,
+      "hidden": false
+    },
+    {
+      "autoFocus": false,
+      "subFields": [],
+      "name": "image",
+      "required": true,
+      "type": "file",
+      "allowedFileTypes": ["jpeg", "png"],
+      "@type": "@builder.io/core:Field",
+      "copyOnAdd": true,
+      "defaultValue": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2F8c8bf9b14266412497c0090aa3136beb",
+      "showTemplatePicker": true,
+      "noPhotoPicker": false,
+      "mandatory": false,
+      "disallowRemove": false,
+      "showIf": "",
+      "permissionsRequiredToEdit": "",
+      "advanced": false,
+      "onChange": "",
+      "model": "",
+      "hideFromFieldsEditor": false,
+      "hideFromUI": false,
+      "helperText": "",
+      "hidden": false,
+      "simpleTextOnly": false
+    }
+  ],
+  "publicReadable": true,
+  "individualEmbed": false,
+  "schema": {},
+  "lastUpdateBy": null,
+  "subType": "",
+  "id": "6d30b724c93d4198b0c0ce2d3ce390dc",
+  "injectWcPosition": "",
+  "repeatable": false,
+  "archived": false,
+  "hooks": {},
+  "pathPrefix": "/",
+  "requiredTargets": [],
+  "allowBuiltInComponents": true,
+  "isPage": false,
+  "publicWritable": false,
+  "autoTracked": true,
+  "sendToElasticSearch": false,
+  "hideOptions": false,
+  "examplePageUrl": "",
+  "showAbTests": true,
+  "allowTests": true,
+  "getSchemaFromPage": false,
+  "allowMetrics": true,
+  "defaultQuery": [],
+  "useQueryParamTargetingClientSide": false,
+  "kind": "data",
+  "designerVersion": 1,
+  "strictPrivateWrite": false,
+  "componentsOnlyMode": false,
+  "showMetrics": true,
+  "singleton": false,
+  "bigData": false,
+  "hidden": false,
+  "allowHeatmap": true,
+  "strictPrivateRead": false,
+  "@originId": "c71bab5b43fa42eca870e330a39b59e0"
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Copy this file as .env.local
		NEXT_PUBLIC_BUILDER_API_KEY=