Skip to content

Commit de54ad8

Browse files
teleazizteleaziz
authored
[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/)
1 parent 628e6ac commit de54ad8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+2913
-0
lines changed

‎docs/basic-features/pages.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ You can also use **Client-side Rendering** along with Static Generation or Serve
6363
<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>
6464
<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>
6565
<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>
66+
<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>
6667
<li><a href="https://static-tweet.vercel.app/">Static Tweet (Demo)</a></li>
6768
</ul>
6869
</details>

‎examples/blog-starter/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
3838
- [GraphCMS](/examples/cms-graphcms)
3939
- [Kontent](/examples/cms-kontent)
4040
- [Umbraco Heartcore](/examples/cms-umbraco-heartcore)
41+
- [Builder.io](/examples/cms-builder-io)
4142

4243
## How to use
4344

‎examples/cms-agilitycms/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ Once you have access to [the environment variables you'll need](#step-15-set-up-
3232
- [Ghost](/examples/cms-ghost)
3333
- [Umbraco Heartcore](/examples/cms-umbraco-heartcore)
3434
- [Blog Starter](/examples/blog-starter)
35+
- [Builder.io](/examples/cms-builder-io)
3536

3637
## How to use
3738

‎examples/cms-builder-io/.env.local.example

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Copy this file as .env.local
2+
NEXT_PUBLIC_BUILDER_API_KEY=

‎examples/cms-builder-io/.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel

‎examples/cms-builder-io/README.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# A statically generated blog example using Next.js and Builder.io
2+
3+
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.
4+
5+
## Demo
6+
7+
[https://cms-builder-io.vercel.app/](https://cms-builder-io.vercel.app/)
8+
9+
## How to use
10+
11+
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:
12+
13+
```bash
14+
npx create-next-app --example cms-builder-io cms-builder-io-app
15+
# or
16+
yarn create next-app --example cms-builder-io cms-builder-io-app
17+
```
18+
19+
## Configuration
20+
21+
### Step 1 Install the Builder.io cli
22+
23+
```
24+
npm install @builder.io/cli -g
25+
```
26+
27+
### Step 2 Generate a space
28+
29+
[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"
30+
31+
```
32+
cd cms-builder-io-app
33+
builder create -k [private-key] -n [space-name] -d
34+
```
35+
36+
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`)
37+
38+
```
39+
BUILDER_PUBLIC_KEY=...
40+
```
41+
42+
### Step 3 Run Next.js in development mode
43+
44+
```bash
45+
npm install
46+
npm run dev
47+
48+
# or
49+
50+
yarn install
51+
yarn dev
52+
```
53+
54+
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).
55+
56+
### Step 4 Try preview mode
57+
58+
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).
59+
60+
To exit the preview mode, you can click **Click here to exit preview mode** at the top.
61+
62+
### Step 5 Deploy on Vercel
63+
64+
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)).
65+
66+
#### Deploy Your Local Project
67+
68+
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).
69+
70+
**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
71+
72+
#### Deploy from Our Template
73+
74+
Alternatively, you can deploy using our template by clicking on the Deploy button below.
75+
76+
[![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)
77+
78+
### Related examples
79+
80+
- [WordPress](/examples/cms-wordpress)
81+
- [DatoCMS](/examples/cms-datocms)
82+
- [Sanity](/examples/cms-sanity)
83+
- [TakeShape](/examples/cms-takeshape)
84+
- [Prismic](/examples/cms-prismic)
85+
- [Contentful](/examples/cms-contentful)
86+
- [Agility CMS](/examples/cms-agilitycms)
87+
- [Cosmic](/examples/cms-cosmic)
88+
- [Strapi](/examples/cms-strapi)
89+
- [ButterCMS](/examples/cms-buttercms)
90+
- [GraphCMS](/examples/cms-graphcms)
91+
- [Kontent](/examples/cms-kontent)
92+
- [Ghost](/examples/cms-ghost)
93+
- [Blog Starter](/examples/blog-starter)

‎examples/cms-builder-io/builder/author/joe-public.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"createdBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2",
3+
"createdDate": 1613015350978,
4+
"data": {
5+
"image": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2F6ae860242834453ea87d6057e7df9754",
6+
"name": "Joe Public"
7+
},
8+
"id": "7b0b333bd44b4e91a6f4bf93158cb62b",
9+
"lastUpdatedBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2",
10+
"meta": {
11+
"kind": "data"
12+
},
13+
"modelId": "6d30b724c93d4198b0c0ce2d3ce390dc",
14+
"name": "Joe Public",
15+
"published": "published",
16+
"query": [],
17+
"testRatio": 1,
18+
"variations": {},
19+
"lastUpdated": 1613031369279,
20+
"rev": "0pjukbnd3ox",
21+
"@originOrg": "8f6bae86bfa3487eb1a18f263118c832",
22+
"@originContentId": "ba1fb5129adf4c379424d346666cc092",
23+
"@originModelId": "c71bab5b43fa42eca870e330a39b59e0"
24+
}

‎examples/cms-builder-io/builder/author/johnny-doe.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"createdBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2",
3+
"createdDate": 1613027534444,
4+
"data": {
5+
"image": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2F5df565e2c411421082123ea8c1084a73",
6+
"name": "Johnny Roe"
7+
},
8+
"id": "d50fe8eced654b2dae22c738dbeabcee",
9+
"lastUpdatedBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2",
10+
"meta": {
11+
"kind": "data"
12+
},
13+
"modelId": "6d30b724c93d4198b0c0ce2d3ce390dc",
14+
"name": "Johnny Doe",
15+
"published": "published",
16+
"query": [],
17+
"testRatio": 1,
18+
"variations": {},
19+
"lastUpdated": 1613067837951,
20+
"rev": "0pjukbnd3ox",
21+
"@originOrg": "8f6bae86bfa3487eb1a18f263118c832",
22+
"@originContentId": "edcaddd1a70f494ba1955704cd88ca4f",
23+
"@originModelId": "c71bab5b43fa42eca870e330a39b59e0"
24+
}

‎examples/cms-builder-io/builder/author/schema.model.json

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
{
2+
"helperText": "",
3+
"injectWcAt": "",
4+
"webhooks": [],
5+
"showTargeting": true,
6+
"sendToMongoDb": true,
7+
"hideFromUI": false,
8+
"showScheduling": true,
9+
"name": "author",
10+
"fields": [
11+
{
12+
"showTemplatePicker": true,
13+
"helperText": "",
14+
"type": "text",
15+
"name": "name",
16+
"noPhotoPicker": false,
17+
"simpleTextOnly": false,
18+
"permissionsRequiredToEdit": "",
19+
"@type": "@builder.io/core:Field",
20+
"mandatory": false,
21+
"required": true,
22+
"hideFromFieldsEditor": false,
23+
"hideFromUI": false,
24+
"model": "",
25+
"copyOnAdd": true,
26+
"disallowRemove": false,
27+
"showIf": "",
28+
"advanced": false,
29+
"onChange": "",
30+
"subFields": [],
31+
"autoFocus": false,
32+
"hidden": false
33+
},
34+
{
35+
"autoFocus": false,
36+
"subFields": [],
37+
"name": "image",
38+
"required": true,
39+
"type": "file",
40+
"allowedFileTypes": ["jpeg", "png"],
41+
"@type": "@builder.io/core:Field",
42+
"copyOnAdd": true,
43+
"defaultValue": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2F8c8bf9b14266412497c0090aa3136beb",
44+
"showTemplatePicker": true,
45+
"noPhotoPicker": false,
46+
"mandatory": false,
47+
"disallowRemove": false,
48+
"showIf": "",
49+
"permissionsRequiredToEdit": "",
50+
"advanced": false,
51+
"onChange": "",
52+
"model": "",
53+
"hideFromFieldsEditor": false,
54+
"hideFromUI": false,
55+
"helperText": "",
56+
"hidden": false,
57+
"simpleTextOnly": false
58+
}
59+
],
60+
"publicReadable": true,
61+
"individualEmbed": false,
62+
"schema": {},
63+
"lastUpdateBy": null,
64+
"subType": "",
65+
"id": "6d30b724c93d4198b0c0ce2d3ce390dc",
66+
"injectWcPosition": "",
67+
"repeatable": false,
68+
"archived": false,
69+
"hooks": {},
70+
"pathPrefix": "/",
71+
"requiredTargets": [],
72+
"allowBuiltInComponents": true,
73+
"isPage": false,
74+
"publicWritable": false,
75+
"autoTracked": true,
76+
"sendToElasticSearch": false,
77+
"hideOptions": false,
78+
"examplePageUrl": "",
79+
"showAbTests": true,
80+
"allowTests": true,
81+
"getSchemaFromPage": false,
82+
"allowMetrics": true,
83+
"defaultQuery": [],
84+
"useQueryParamTargetingClientSide": false,
85+
"kind": "data",
86+
"designerVersion": 1,
87+
"strictPrivateWrite": false,
88+
"componentsOnlyMode": false,
89+
"showMetrics": true,
90+
"singleton": false,
91+
"bigData": false,
92+
"hidden": false,
93+
"allowHeatmap": true,
94+
"strictPrivateRead": false,
95+
"@originId": "c71bab5b43fa42eca870e330a39b59e0"
96+
}

0 commit comments

Comments
 (0)