https://github.com/datocms/nextjs-demo
Next.js powered blog with DatoCMS integration
https://github.com/datocms/nextjs-demo
Last synced: 9 months ago
JSON representation
Next.js powered blog with DatoCMS integration
- Host: GitHub
- URL: https://github.com/datocms/nextjs-demo
- Owner: datocms
- Created: 2020-03-10T13:53:22.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-02-06T08:12:02.000Z (over 1 year ago)
- Last Synced: 2025-05-24T10:06:26.058Z (about 1 year ago)
- Language: JavaScript
- Homepage: nextjs-demo-bay.vercel.app
- Size: 17.1 MB
- Stars: 145
- Watchers: 5
- Forks: 51
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
👉 [Visit the DatoCMS homepage](https://www.datocms.com) or see [What is DatoCMS?](#what-is-datocms)
---
# A Blog example using Next.js and DatoCMS
This example showcases a Next.js Blog using [DatoCMS](https://www.datocms.com/) as the data source. It fully supports [Preview Mode](https://www.datocms.com/docs/next-js/setting-up-next-js-preview-mode) with [DatoCMS real-time updates](https://www.datocms.com/docs/next-js/real-time-updates).
The purpose of this repo is to have a quick start reference that can be set up with the "one-click" button below.
## Demo
Have a look at the end result live:
### [https://nextjs-demo-bay.vercel.app/](https://nextjs-demo-bay.vercel.app/)
## How to use
### Quick start
1. [Create an account on DatoCMS](https://datocms.com).
2. Make sure that you have set up the [Github integration on Vercel](https://vercel.com/docs/git/vercel-for-github).
3. Let DatoCMS set everything up for you clicking this button:
[](https://dashboard.datocms.com/deploy?repo=datocms/nextjs-demo)
### Local setup
Once the setup of the project and repo is done, clone the repo locally.
#### Set up environment variables
In your DatoCMS' project, go to the **Settings** menu at the top and click **API tokens**.
Then click **Read-only API token** and copy the token.
Next, copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
```bash
cp .env.local.example .env.local
```
Then set each variable inside `.env.local`:
- `NEXT_DATOCMS_API_TOKEN` should be the API token you just copied.
- `NEXT_DATOCMS_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for the Preview Mode](https://www.datocms.com/docs/next-js/setting-up-next-js-preview-mode).
Your `.env.local` file should look like this:
```bash
NEXT_DATOCMS_API_TOKEN=...
NEXT_DATOCMS_PREVIEW_SECRET=...
```
#### Run your project locally
```bash
npm install
npm run dev
```
Your blog should be up and running on [http://localhost:3000](http://localhost:3000)!
#### Try preview mode
On DatoCMS, go to one of the posts you've created and:
- **Update the title**. For example, you can add `[Draft]` in front of the title.
- Click **Save**, but **DO NOT** click **Publish**. By doing this, the post will be in the draft state.
(If it doesn't become draft, you need to go to the model settings for `Post`, go to **Additional Settings**, and turn on **Enable draft/published system**.)
Now, if you go to the post page on localhost, you won't see the updated title. However, if you use the **Preview Mode**, you'll be able to see the change ([Documentation](https://www.datocms.com/docs/next-js/setting-up-next-js-preview-mode)).
To enable the Preview Mode, go to this URL:
```
http://localhost:3000/api/draft?secret=
```
- `` should be the string you entered for `NEXT_DATOCMS_PREVIEW_SECRET`.
- `` should be the post's `slug` attribute (you can check on DatoCMS).
You should now be able to see the updated title. To exit the preview mode, you can click **Click here to exit preview mode** at the top.
---
# What is DatoCMS?
[DatoCMS](https://www.datocms.com/) is the REST & GraphQL Headless CMS for the modern web.
Trusted by over 25,000 enterprise businesses, agencies, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our [developers](https://www.datocms.com/team/best-cms-for-developers), [content editors](https://www.datocms.com/team/content-creators) and [marketers](https://www.datocms.com/team/cms-digital-marketing)!
**Why DatoCMS?**
- **API-First Architecture**: Built for both REST and GraphQL, enabling flexible content delivery
- **Just Enough Features**: We believe in keeping things simple, and giving you [the right feature-set tools](https://www.datocms.com/features) to get the job done
- **Developer Experience**: First-class TypeScript support with powerful developer tools
**Getting Started:**
- ⚡️ [Create Free Account](https://dashboard.datocms.com/signup) - Get started with DatoCMS in minutes
- 🔖 [Documentation](https://www.datocms.com/docs) - Comprehensive guides and API references
- ⚙️ [Community Support](https://community.datocms.com/) - Get help from our team and community
- 🆕 [Changelog](https://www.datocms.com/product-updates) - Latest features and improvements
**Official Libraries:**
- [**Content Delivery Client**](https://github.com/datocms/cda-client) - TypeScript GraphQL client for content fetching
- [**REST API Clients**](https://github.com/datocms/js-rest-api-clients) - Node.js/Browser clients for content management
- [**CLI Tools**](https://github.com/datocms/cli) - Command-line utilities for schema migrations (includes [Contentful](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [WordPress](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress) importers)
**Official Framework Integrations**
Helpers to manage SEO, images, video and Structured Text coming from your DatoCMS projects:
- [**React Components**](https://github.com/datocms/react-datocms)
- [**Vue Components**](https://github.com/datocms/vue-datocms)
- [**Svelte Components**](https://github.com/datocms/datocms-svelte)
- [**Astro Components**](https://github.com/datocms/astro-datocms)
**Additional Resources:**
- [**Plugin Examples**](https://github.com/datocms/plugins) - Example plugins we've made that extend the editor/admin dashboard
- [**Starter Projects**](https://www.datocms.com/marketplace/starters) - Example website implementations for popular frameworks
- [**All Public Repositories**](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)