15cc88909c
<!-- Thanks for opening a PR! Your contribution is much appreciated. In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change that you're making: --> This adds a new example under cms-dotcms/. Is a general-purpose example that should allow developers to undestand how to use next.js with dotCMS apis. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [x] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: Daniel Esteves <estevesd8@gmail.com> Co-authored-by: Will Ezell <will@dotcms.com> Co-authored-by: Arcadio Quintero A <oidacra@gmail.com> Co-authored-by: Rafael <rjvelazco21@gmail.com> |
||
|---|---|---|
| .. | ||
| builder | ||
| components | ||
| lib | ||
| pages | ||
| public/favicon | ||
| styles | ||
| .env.local.example | ||
| .gitignore | ||
| jsconfig.json | ||
| next.config.js | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| tailwind.config.js | ||
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.