How to Create a Blog Using Next.js and Contentful CMS

• contentful.js

  3 1,146 9.3 TypeScript

  JavaScript library for Contentful's Delivery API (node & browser)

  

Contentful has two SDKs that are available for integration with React/Next. The first is their Content Delivery API (CDA). And the second is their Content Management API (CMA). The first is a read-only API that's used for delivering content to your front-end. The second is read/write and allows creating, editing and managing content and content models programmatically.

• contentful-management.js

  2 259 9.3 TypeScript

  JavaScript library for Contentful's Management API (node & browser)

  

Contentful has two SDKs that are available for integration with React/Next. The first is their Content Delivery API (CDA). And the second is their Content Management API (CMA). The first is a read-only API that's used for delivering content to your front-end. The second is read/write and allows creating, editing and managing content and content models programmatically.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• contentful-next-blog

  1 2 0.0 JavaScript

  An example of a React/Next.js blog with a Contentful CMS back-end.

The complete repository for this tutorial can be found Here.

• vercel

  479 12,144 9.8 TypeScript

  Develop. Preview. Ship.

  

In case you haven't heard, Next.JS is a React JS framework that super-optimizes website page speeds. When you host your Next website on Vercel's platform (for free), you get their automatic image optimization as well when you use Next's Next/Image built-in component.

• Next.js

  2,041 120,572 10.0 JavaScript

  The React Framework

  

In case you haven't heard, Next.JS is a React JS framework that super-optimizes website page speeds. When you host your Next website on Vercel's platform (for free), you get their automatic image optimization as well when you use Next's Next/Image built-in component.

• Puts Debuggerer

  3,149 91 5.5 Ruby

  Ruby library for improved puts debugging, automatically displaying bonus useful information such as source line number and source code.

If you're a seasoned developer, you probably already have a Github account. If not head over there now and set one up. Github is a development collaboration and code-management / versioning system. Vercel will automatically rebuild your Next.JS website when you push a new commit of your code to Github.

• desktop

  214 19,141 9.9 TypeScript

  Focus on what matters instead of fighting with Git.

  

I also recommend using the Github Desktop app, which is great for visualizing changes bewtween commits. If you're already a seasoned command-line user, then I understand! :-)

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• HomeBrew

  1,281 39,373 10.0 Ruby

  🍺 The missing package manager for macOS (or Linux)

  

Ok, so hopefully you have the latest versions of Node.JS and NPM installed. This tutorial doesn't cover that, but here's a point in the right direction. Personally, I prefer Ubuntu for my React development environment, but Node will run on Windows or Mac as well. I think you need to use Homebrew to install it on MacOS.

Suggest a related project