Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/buttercms/nextjs-starter-buttercms

Drop-in proof-of-concept Next.js app, fully integrated with your ButterCMS account
https://github.com/buttercms/nextjs-starter-buttercms

javascript next nextjs starter starter-kit starter-project vercel

Last synced: 5 days ago
JSON representation

Drop-in proof-of-concept Next.js app, fully integrated with your ButterCMS account

Host: GitHub
URL: https://github.com/buttercms/nextjs-starter-buttercms
Owner: ButterCMS
Created: 2021-11-11T14:52:44.000Z (about 3 years ago)
Default Branch: main
Last Pushed: 2023-02-20T15:22:09.000Z (over 1 year ago)
Last Synced: 2023-06-11T00:15:31.635Z (over 1 year ago)
Topics: javascript, next, nextjs, starter, starter-kit, starter-project, vercel
Language: JavaScript
Homepage: https://nextjs-starter-buttercms.vercel.app/
Size: 701 KB
Stars: 27
Watchers: 4
Forks: 28
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Next.js + ButterCMS Starter Project
Live Demo: https://nextjs-starter-buttercms.vercel.app/

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FButterCMS%2Fnextjs-starter-buttercms&env=NEXT_PUBLIC_BUTTER_CMS_API_KEY&envDescription=Your%20ButterCMS%20API%20Token&envLink=https%3A%2F%2Fbuttercms.com%2Fsettings%2F&project-name=nextjs-starter-buttercms&repo-name=nextjs-starter-buttercms&redirect-url=https%3A%2F%2Fbuttercms.com%2Fonboarding%2Fvercel-starter-deploy-callback%2F&production-deploy-hook=Deploy%20Triggered%20from%20ButterCMS&demo-title=ButterCMS%20Next.js%20Starter&demo-description=Fully%20integrated%20with%20your%20ButterCMS%20account&demo-url=https%3A%2F%2Fnextjs-starter-buttercms.vercel.app%2F&demo-image=https://cdn.buttercms.com/r0tGK8xFRti2iRKBJ0eY&repository-name=nextjs-starter-buttercms)

[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/ButterCMS/nextjs-starter-buttercms&env%5BNEXT_PUBLIC_BUTTER_CMS_API_KEY%5D=check%20https://buttercms.com/settings)

This Next.js starter project fully integrates with dynamic sample content from your ButterCMS account, including main menu, pages, blog posts, categories, and tags, all with a beautiful, custom theme with already-implemented search functionality. All of the included sample content is automatically created in your account dashboard when you sign up for a free trial of ButterCMS.

A copy of this starter project can be easily and quickly deployed to Vercel or Heroku with the click of a button.
## 1) Installation

First, install the dependencies by cloning the repo and running one of the following commands, depending on your current setup:
```bash
git clone https://github.com/ButterCMS/nextjs-starter-buttercms.git
cd nextjs-starter-buttercms
npm install # or yarn install
```

## 2) Set API Token

To fetch your ButterCMS content, add your API token as an environment variable.

```bash
$ echo 'NEXT_PUBLIC_BUTTER_CMS_API_KEY=' >> .env
```

## 3) Run the local server

To view the app in a browser, you'll need to run the local development server:

```bash
npm run dev # or yarn dev
```

Congratulations! Your starter project is now live: [http://localhost:3000](http://localhost:3000).

## 4) Deploy

Deploy your Butterized proof of concept app and spread your love of Butter, to either
Vercel, the creators of Next.js, or to Heroku. With the click of a button, you'll create a copy of our starter project in your Git provider account, instantly deploy it, and institute a full content workflow connected to your ButterCMS account. Smooth.

## 5) Previewing

Your starter project is automatically configured to show draft changes saved in your Butter account when run locally or deployed to a hosting provider. To disable this behavior, set the following value in your .env file: PREVIEW=false.