Tailwind Resources Logo Tailwind Resources
Nextjs Demo screenshot

Nextjs Demo

Author Avatar Theme by Datocms
Updated: 6 Feb 2025
145 Stars

Next.js powered blog with DatoCMS integration

Github Live Preview

Categories

Nextjs React

Overview

This example showcases a Next.js Blog using DatoCMS as the data source. It supports Preview Mode with DatoCMS real-time updates. The purpose of this repository is to provide a quick start reference that can be set up easily.

Features

  • Next.js Blog with DatoCMS integration
  • Support for Preview Mode with real-time updates
  • One-click button for easy setup
  • Ability to update and preview post changes

Installation

Follow these steps to install and set up the theme:

  1. Create an account on DatoCMS.
  2. Set up the Github integration on Vercel.
  3. Click the “Deploy with DatoCMS” button to let DatoCMS set everything up for you.
  4. Clone the repository locally once the setup is done.
  5. Set up environment variables:
    • Go to your DatoCMS project’s Settings menu and click on API tokens.
    • Copy the Read-only API token.
    • Rename the .env.example file in the directory to .env.
    • Set the value of NEXT_DATOCMS_API_TOKEN in the .env file to the copied API token.
    • Set the value of NEXT_DATOCMS_PREVIEW_SECRET in the .env file to a random string (avoid spaces), e.g., MY_SECRET. This is used for Preview Mode.
  6. Run the project locally using npm start or yarn start.
  7. Access the blog on http://localhost:3000.

To use the Preview Mode:

  1. Go to one of the posts you’ve created on DatoCMS.
  2. Update the title by adding [Draft] in front of the title.
  3. Save the changes but do not publish the post.
  4. To see the updated title on the local host, enter the following URL in the browser:
http://localhost:3000/api/preview?secret=<NEXT_DATOCMS_PREVIEW_SECRET>&slug=<post-slug>
  • <NEXT_DATOCMS_PREVIEW_SECRET> should be the secret string you set for NEXT_DATOCMS_PREVIEW_SECRET in the .env file.
  • <post-slug> should be the slug attribute of the post.
  1. To exit the preview mode, click “Click here to exit preview mode” at the top.

Summary

This Next.js Blog example uses DatoCMS as the data source and fully supports Preview Mode with real-time updates. It provides a quick start reference for setting up the blog with easy installation steps. The integration with DatoCMS enables users to update post titles and preview the changes before publishing.