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.
Please check out the Vercel demo at https://buttercms-marketing-site-nextjs-react.orlyohreally.vercel.app/.
Step 1. Create an account on ButterCMS and create content
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
- Create a Vercel account at https://vercel.com/signup and download the CLI
- Add the API key as a secret
vercel secrets add butter-cms-api-key "YOUR_API_KEY"
- Run
vercel
at the project root
MIT Licensed. Copyright (c) ButterCMS 2019.