datocms / nextjs-demo

Next.js powered blog with DatoCMS integration

👉 Visit the DatoCMS homepage or see What is DatoCMS?

---

A Blog example using Next.js and DatoCMS

This example showcases a Next.js Blog using DatoCMS as the data source. It fully supports Preview Mode with DatoCMS 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/

How to use

Quick start

1. Create an account on DatoCMS.

2. Make sure that you have set up the Github integration on Vercel.

3. Let DatoCMS set everything up for you clicking this button:

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.example file in this directory to .env (which will be ignored by Git):

cp .env.example .env

Then set each variable on .env:

• 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 file should look like this:

NEXT_DATOCMS_API_TOKEN=...
NEXT_DATOCMS_PREVIEW_SECRET=...

Run your project locally

npm install
npm run dev

Your blog should be up and running on 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).

To enable the Preview Mode, go to this URL:

http://localhost:3000/api/draft?secret=<secret>

• <secret> should be the string you entered for NEXT_DATOCMS_PREVIEW_SECRET.
• <slug> 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 is the REST & GraphQL Headless CMS for the modern web.

Trusted by over 25,000 enterprise businesses, agency partners, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our developers, content editors and marketers!

Quick links:

• ⚡️ Get started with a free DatoCMS account
• 🔖 Go through the docs
• ⚙️ Get support from us and the community
• 🆕 Stay up to date on new features and fixes on the changelog

Our featured repos:

• datocms/react-datocms: React helper components for images, Structured Text rendering, and more
• datocms/js-rest-api-clients: Node and browser JavaScript clients for updating and administering your content. For frontend fetches, we recommend using our GraphQL Content Delivery API instead.
• datocms/cli: Command-line interface that includes our Contentful importer and Wordpress importer
• datocms/plugins: Example plugins we've made that extend the editor/admin dashboard
• DatoCMS Starters has examples for various Javascript frontend frameworks

Or see all our public repos

nextjs-demo's Issues

Demo build failing on Vercel

Hi,

I tried to launch the Nextjs Blog Demo, but the build is failing on Vercel. I followed the following steps:

1. Choose the Nextjs Blog Demo from marketplace and hit "Start free project"
2. Things went well and a dialogue box came up

3. When I tried to access the site, it was down. 4. The build failed with this error.

Waiting for your reply 😀

Trying to work the demo - get an error

Hi all,

I follow the instructions in the README and use the following url:

This is my .env file

NEXT_EXAMPLE_CMS_DATOCMS_API_TOKEN=xxxx
NEXT_EXAMPLE_CMS_DATOCMS_PREVIEW_SECRET=supersecret

When I use the following URL:
http://localhost:3000/api/preview?secret=supersecret

I get the following error

Error: Error serializing `.subscription.environment` returned from `getStaticProps` in "/".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

photoGallery implementation?

I cloned this repo several months ago and tried to create a personal photo gallery for myself. I've had some difficulty finding any information on the DatoCMS docs, or even anywhere else online on how to properly implement the photo gallery feature. Forgive me if this is the wrong place to get information, but I thought I'd start here.

I'm completely able to pull images from the Photo Gallery in the Posts model:
.
However, this doesn't work after hitting publish. (Please note, I isolated the photoGallery to troubleshoot here. The full [slug].js schema I was trying to implement can be found in my repo here: https://github.com/kr1st1nagr03g3r/lens-lore ).

I've also tried re-cloning this repo, going to the DatoCMS GUI, uploading images to your example post "Unforgettable Trip to The Great Wall in China ". This still does not create a photo gallery. I can only upload single images in this model.

I'm just generally trying to find any documentation on how to get a photo gallery to work... and I am assuming it's possible since it's an options in the GUI models.

Thanks a ton, I hope I can get this to work!

Question or potential bug in api/getAllPostsWithSlug

Hi there!

I'm new to NextJS but upon developing my blog using this demo template I noticed a missing await for the getAllPostsWithSlug function. Is this simply an error or is there some Javascript magic I don't know about?

nextjs-demo/lib/api.js

Line 63 in 807d713

const data = fetchAPI(`

Thanks :)

Getting data from a specific slug

Hi! Qq on best practice with dato -- in this line you are getting allPosts, but due to your limits, can only get the first 100 results. What if a site has more than 100, how do you recommend getting data for a slug on that posts/[slug] page ?

Unable to create the NextJS / DatoCms demo project

When I click "Start Free Project" (Found here: https://www.datocms.com/marketplace/starters/nextjs-template-blog) I run into a message on the DatoCMS site saying, "We're sorry, but some features of DatoCMS that this template requires, are not available on your plan."

I'm trying to debug why my dynamic pages aren't returning any data in this function:

export default async function Page({ params }) {
  const { isEnabled } = draftMode();

  const pageRequest = getPageRequest(params.slug);
  console.log('data pageRequest ->', pageRequest);  ---> Returns object with PAGE_CONTENT_QUERY [my long query object], includeDrafts: false, variables: { slug: 'openbook' }
  const data = await performRequest(pageRequest);
  console.log('data WORK PAGE ->', data); ---> undefined

Two different problems. I want to fix the data request, but thought I'd point out the hurdle with the demo project as well. (cloned the starter project and used the env key:value from an old existing datocms project btw. Everything is good and done except for these dynamic pages)

Console logs 'Can't resolve 'fsevents' repeatedly under Windows 10

Issue:
When installing the blog demo under Windows 10, the Node package fsevents (which only works under MacOS) seems to be installed as a dependency. This does not seem to cause any functional issues, but clutters the console with unnecessary warnings, which repeat with every page refresh.

Hardware used

• Windows 10 (version 20H2)
• Firefox V. 89.0
• Node 14.17.0

Update dependencies

Hey! We recently updated the dependencies of this example in the Next.js repo - should they be copied here?

https://github.com/vercel/next.js/tree/canary/examples/cms-datocms

CORS error with tiny-json-http

Hello,

Somehow when I update tiny-json-http or use Axios instead I get the following CORS error in preview mode:

Access to fetch at 'https://graphql-listen.datocms.com/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-include-drafts is not allowed by Access-Control-Allow-Headers in preflight response.

I assume the error originates from the useQuerySubscription, hook.

Rendering blocks with multiple fields in StructuredText component errors with `Element type is invalid`?

I'm probably not doing this right. I tried adding multiple fields to a block inside a Structured Text block from Dato.

My Next.js app says Element type is invalid when I pipe it into the post-body component from your demo.

Here's what my query looks like, might be the best thing to assert first: