### Next.js blog starter

## Next.js Event Coverage Liveblog

### A virtual event starter built with Next.js and DatoCMS with real-time updates

[

**Want to create your own starter project?** Learn how to do that in our documentation!

](https://www.datocms.com/docs/general-concepts/project-starters-and-templates.md#generate-a-project-starter-button)

## Note: More recent examples are available

This example was built with an older version of Next.js. For examples using more recent versions of Next and other frameworks, please see our most [current demos and starter kits](https://www.datocms.com/marketplace/starters.md).

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app), demonstrating the use of DatoCMS [Real-time Updates API](https://www.datocms.com/docs/real-time-updates-api.md).

## Final result

Demo here: [https://next-event-coverage-liveblog.vercel.app/](https://next-event-coverage-liveblog.vercel.app/)

(Image content)

## Deploy this demo project for free!

Click this button to test and deploy this demo project to [Vercel](https://vercel.com/), along with a fully configured DatoCMS project and a Github repo:

[(Image content)](https://dashboard.datocms.com/deploy?repo=datocms/next-event-coverage-liveblog)

## Learn More

To learn more about how to integrate DatoCMS with your Next.js project, take a look at the following resources:

-   [DatoCMS + Next.js Integration Guide](https://www.datocms.com/docs/next-js.md)
-   [How to use DatoCMS Real-time updates API with Next.js](https://www.datocms.com/docs/next-js/real-time-updates.md)
-   [react-datocms](https://github.com/datocms/react-datocms) — A set of React components/hooks that help you integrate DatoCMS with any React project

## Starting the development server

First, create a `.env.local` and put a `NEXT_PUBLIC_DATOCMS_API_TOKEN` env variable containing the API token of your DatoCMS project:

Terminal window

```bash
echo NEXT_PUBLIC_DATOCMS_API_TOKEN=<YOUR_API_TOKEN> > .env.local
```

Then, run the development server:

Terminal window

```bash
npm run dev# oryarn dev
```

Open localhost:3000 with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.