{"id":13423691,"url":"https://github.com/ButterCMS/react-cms-blog-with-next-js","last_synced_at":"2025-03-15T17:32:09.718Z","repository":{"id":18841771,"uuid":"84120338","full_name":"ButterCMS/react-cms-blog-with-next-js","owner":"ButterCMS","description":"Next.js + React CMS-powered blog and marketing site powered by ButterCMS","archived":false,"fork":false,"pushed_at":"2023-04-18T06:54:01.000Z","size":739,"stargazers_count":145,"open_issues_count":5,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-07T08:47:09.774Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ButterCMS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-03-06T21:00:49.000Z","updated_at":"2024-10-28T17:17:01.000Z","dependencies_parsed_at":"2024-04-09T21:47:44.734Z","dependency_job_id":"c5ea42e8-6e8e-4f97-9eba-10a17df5ca61","html_url":"https://github.com/ButterCMS/react-cms-blog-with-next-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Freact-cms-blog-with-next-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Freact-cms-blog-with-next-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Freact-cms-blog-with-next-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Freact-cms-blog-with-next-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ButterCMS","download_url":"https://codeload.github.com/ButterCMS/react-cms-blog-with-next-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243767151,"owners_count":20344881,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:00:40.749Z","updated_at":"2025-03-15T17:32:08.847Z","avatar_url":"https://github.com/ButterCMS.png","language":"JavaScript","funding_links":[],"categories":["Boilerplates"],"sub_categories":[],"readme":"# React CMS-powered application built with Next.js\n\n## Important Notice\nThis project was created as an example use case of ButterCMS with React and Next.JS, and will not be actively maintained. \n\nIf you’re interested in exploring the best, most up-to-date way to integrate Butter into javascript frameworks like React and Next.js, you can check out the following resources:\n\n### Starter Projects\n\nThe 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.\n- [Next.js Starter](https://buttercms.com/starters/nextjs-starter-project/)\n- [Angular Starter](https://buttercms.com/starters/angular-starter-project/)\n- [React Starter](https://buttercms.com/starters/react-starter-project/)\n- [Vue.js Starter](https://buttercms.com/starters/vuejs-starter-project/)\n- Or see a list of all our [currently-maintained starters](https://buttercms.com/starters/). (Over a dozen and counting!)\n\n### Other Resources\n- Check out the [official ButterCMS Docs](https://buttercms.com/docs/)\n- Check out the [official ButterCMS API docs](https://buttercms.com/docs/api/)\n\n## Project Description\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fbuttercms%2Freact-cms-blog-with-next-js)\n\n- Demo: https://react-cms-blog-with-next-js.orlyohreally.vercel.app/\n\n[Next.js](https://github.com/vercel/next.js/) is a small framework for building universal React webapps. Next.js comes with Webpack and Babel built-in. You can read more about the philosophy behind Next.js [here](https://zeit.co/blog/next).\n\n[ButterCMS](https://buttercms.com) is a hosted API-based CMS and blog engine that lets you build CMS-powered apps using any programming language. You can think of Butter as similar to WordPress except that you build your website in your language of choice and then plug-in the dynamic content using an API.\n\nThis projects shows how to integrate ButterCMS into Next.js application:\n\n- How to create page with a list of blog posts and pages for each post. Learn more about blog integration [here](https://buttercms.com/docs/api/#get-your-blog-posts).\n- How to dynamically create pages using data from ButterCMS pages. Learn more about fetching single pages and pages with types [here](https://buttercms.com/docs/api/#pages).\n- How to display collections items on the page. Learn more on how to query collections [here](https://buttercms.com/docs/api/#retrieve-a-collection).\n- How to get all posts categories. Learn more about categories [here](https://buttercms.com/docs/api/#categories).\n- How to create pages with RSS, Atom, and Sitemap feeds. Learn more [here](https://buttercms.com/docs/api/#feeds).\n\nLink to ButterCMS API documentation is https://buttercms.com/docs/api/.\n\n## Set up ButterCMS account\n\n1. Create a free account on ButterCMS - https://buttercms.com/.\n2. To see the project locally you need to create this data in your account:\n   - Create and publish customer case study pages (page with type `customer_case_study`) with this structure:\n     ![customer case study page type configuration](https://buttercms.com/static/images/docs/guides/PagesNewPageType1Gridsome.png)\n     Learn more about page types [here](https://buttercms.com/docs/api-client/nextjs#PagesPageType).\n   - Create collection `faq_items` with this structure:\n     ![faq items collection configuration](images/faq_items.png)\n     Learn more about collections [here](https://buttercms.com/docs/api-client/nextjs#Collections).\n3. Find your read API token from the home page or from settings page, it will be needed later.\n\n## Requirements\n\n- Node \u003e= 12.0.0\n\n## Running project locally\n\n1. Clone and cd into project:\n\n```\ngit clone https://github.com/ButterCMS/react-cms-blog-with-next-js.git\ncd react-cms-blog-with-next-js.git\n```\n\n2. Install all dependencies\n\n```\nnpm install\n```\n\nor\n\n```\nyarn install\n```\n\n1. Copy `.env.example` file as `.env` and replace `BUTTER_CMS_API_KEY` value with your read API token\n2. Run the app in development mode\n\n```\nnpm run dev\n```\n\nor\n\n```\nyarn dev\n```\n\nThe application should be available at `http://localhost:3000`.\n\nTo build the project run `npm run build` and to start run `npm start`\n\n## Deploy on Vercel\n\n1. Create a Vercel account at https://vercel.com/signup and download [the CLI](https://vercel.com/download)\n2. Run `vercel` at the project root\n\n## Webhooks to trigger deployment\n\nWe can make use of the ButterCMS webhooks to notify the application every time a post, page or collection item are added or modified, and reload the Next.js application.\n\nYou can add a new webhook by going to the [https://buttercms.com/webhooks/](https://buttercms.com/webhooks/) page.\n\n![webhook page](images/webhooks.png)\n\nIf you use Vercel, you can create deploy webhooks there. ![Vercel deploy webhooks](images/webhooks-vercel.png)\n\n## Wrap up\n\nNext.js is a powerful framework that makes it easy to build universal React apps. With ButterCMS you can quickly build CMS-powered applications and websites with React and Node.js.\n\nWe hope you enjoyed this tutorial. If you have any questions about setting up your ButterCMS-powered application feel free to contact ButterCMS support.\n\n## Other\n\nView ReactJS [Blog engine](https://buttercms.com/react-blog-engine/) and [Full CMS](https://buttercms.com/react-cms/) for other examples of using ButterCMS with ReactJS. And check out [Next.js Blog engine](https://buttercms.com/nextjs-blog-engine/) and [Next.js CMS](https://buttercms.com/nextjs-cms/) for other Next.js examples.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FButterCMS%2Freact-cms-blog-with-next-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FButterCMS%2Freact-cms-blog-with-next-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FButterCMS%2Freact-cms-blog-with-next-js/lists"}