Integrating Butter into our application took less than an hour and most of that time was spent on design work.
Luke Brean, Legally
Next.js CMS
Powerful CMS. Zero headache.
Drop our API-based CMS into your Next.js app in minutes.
Try ButterCMS free
ButterCMS provides a CMS and content API for Next.js apps. Use ButterCMS with Next.js to enable dynamic content in your apps for page content, blogs, and more. Check out our Next.js source plugin for a full example.
Above is quick video of integrating Butter's Pages API into an application.
Butter's API slides right into our apps and lets us avoid having yet another WordPress site.
Daniel, Founder of Collective IdeaMarketers love Butter
SEO Landing Pages- Customer Case Studies
- Company News & Updates
- Events + Webinar Pages
- Education Center
- Location Pages
- and more...
Butter saves you development time
Save thousands of dollars worth of development time with our easy setup.
Everything you need
- Custom Page Types
- Custom Content Modeling
- Preview changes
- Media library
- CDN for assets
- Testing environment
- Localization
- Webhooks
Beautiful admin interface
Easy to use. Easy to customize.
Integrates with Next.js
Our CMS has a simple content API and drop-in Next.js guide.
Butter requires zero maintenance
Never worry about security upgrades, hosting, or performance.
Try ButterCMS in your Next.js appSetup in minutes
Integrating Butter into your Next.js app is dead simple. Here's a mini tutorial to get a feel for of setting up your blog home and blog post pages.
Fetching blog posts from ButterCMS
First install the ButterCMS Node.js API client and restart your server. We'll load the ButterCMS package in index.js and setup a React component that fetches and displays posts:
npm install buttercms --save
import React from 'react'
import Link from 'next/link'
import Butter from 'buttercms'
const butter = Butter('your_api_token')
export default class extends React.Component {
static async getInitialProps({ query }) {
let page = query.page || 1;
const resp = await butter.post.list({page: page, page_size: 10})
return resp.data;
}
render() {
const { next_page, previous_page } = this.props.meta;
return (
<div>
{this.props.data.map((post) => {
return (
<div><a href={`/post/${post.slug}`}>{post.title}</a></div>
)
})}
<div>
{previous_page && <Link href={`/?page=${previous_page}`}><a>Prev</a></Link>}
{next_page && <Link href={`/?page=${next_page}`}><a>Next</a></Link>}
</div>
</div>
)
}
}About ButterCMS
ButterCMS is an API-based, or "headless", CMS. We're a hosted service and we maintain all of the infrastructure. For more information on how we compare to a traditional CMS check out API-based CMS vs Traditional CMS.
How do you compare to Wordpress?
In short, we offer all the same easy-to-use editing capabilities of Wordpress but are significantly easier for developers to setup and maintain. This means you spend less time working on your CMS and more time focusing on things important to your business.
Do you host my templates?
Unlike CMS's you might be used to, we don't control or host any of your templates. The design of your app (HTML + CSS) lives in your application along side the rest of your app. Your application calls our Content API and we return your content in JSON format. You can then render this content in any way you'd like.
Can I import my content?
Yep. To import existing content from another platform, simply send us an email.
What kind of database can I use?
No database required! We're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.
Can I host this?
No, we're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.
I have other questions
We're happy to help.
Chat with usAbout Next.js
Next.js is a universal JavaScript framework that runs in the browser and the server. It offers developers an easy way to get started, and as it uses React.js for templating it is also a straightforward way for developers with React experience to get productive fast.