Next.js starter project

Get up and running with Next.js and ButterCMS in under two minutes, with a starter that showcases Pages, Collections, and a Blog engine.

One-Click Deploy: Skip local setup and deploy to Vercel instantly.

Quick start

Install dependencies and run setup commands.

$ git clone https://github.com/ButterCMS/nextjs-starter-buttercms.git
$ cd nextjs-starter-buttercms
$ npm install #or yarn install

Add your API token as an environment variable and run development server

$ echo 'NEXT_PUBLIC_BUTTER_CMS_API_KEY=<Your API Token>' >> .env
$ npm run dev # or yarn dev

Local Development: http://localhost:3000

GitHub Repository: https://github.com/ButterCMS/nextjs-starter-buttercms

What’s included

Feature	Description
Pages & Page Types	Pre-built page templates with drag-and-drop schema definition
Components	Modular content blocks for dynamic landing pages
Collections	Structured data for navigation, testimonials, FAQs
Blog Engine	Full blog with posts, categories, tags, and search
Media CDN	Automatic image optimization via Filestack

Deploy options

Deploy to Vercel

One-click deploy with automatic builds on content changes

Deploy to Heroku

Deploy to Heroku with environment configuration

Resources

GitHub Repository

View source code and contribute

Next.js Guide

Framework integration guide

Additional reading

• Ecommerce Tutorial: Build a Powerful Next.js Shopping Cart
• Next.js Localization: How to Build a Multilingual Website with Next-Intl

Next steps

Core Concepts

Learn about Pages, Collections, and Components

API Reference

Explore the full ButterCMS API