This app demonstrates how you can build a marketing site using Next.js on the Front End and the API will be powered by ButterCMS. Next.js is a React.js framework which will do Server Side Rendering for you. As a result, your site will have better SEO score.

This project was created as an example use case of ButterCMS and will not be actively maintained.

If you’re interested in exploring the best, most up-to-date way to integrate Butter into Next.js and React, you can check out the following resources:

The following turn-key starters are fully integrated 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.

• Next.js Starter
• Angular Starter
• React Starter
• Vue.js Starter
• Or see a list of all our currently-maintained starters. (Over a dozen and counting!)

• Check out the official ButterCMS Docs
• Check out the official ButterCMS API docs

Please check out the Vercel demo at https://buttercms-marketing-site-nextjs-react.orlyohreally.vercel.app/.

Register on ButterCMS and get your Read API Token which could be found on home or settings pages. To run the project for your own account you need to create pages and collections in Butter which are used in the application:

• Marketing page with slug marketing-page and this structure - data for sections of the marketing page
• General data page with slug general-data and this structure - general company data i.e. logo and name
• Contact form page with slug contact-form and this structure - content for contact form
• Main navigation links collection with slug main-navigation-links with this
• Social links collection with slug social-links with this structure

git clone https://github.com/ButterCMS/buttercms-marketing-site-nextjs-react
cd buttercms-marketing-site-nextjs-react

Copy .env.sample file to .env file and set BUTTER_CMS_API_KEY as your Read Api Token

yarn install
yarn dev

or

npm install
npm run dev

yarn build

or

npm run build

• Blue - Landing page template from Cruip.
• Next.js - The React.js framework for building SSR web apps.
• React - A JavaScript library for building user interfaces
• Screely - Instantly turn your screenshot into a beautiful design mockup

1. Create a Vercel account at https://vercel.com/signup and download the CLI
2. Add the API key as a secret vercel secrets add butter-cms-api-key "YOUR_API_KEY"
3. Run vercel at the project root

MIT Licensed. Copyright (c) ButterCMS 2019.