/jamstack-workshop-start

The beginning of the Jamstack Conf Next.js/Contentful workshop

Primary LanguageJavaScript

Getting started with Next.js and Contentful

Next.js is a powerful Static Site Generator powered by React that gives you exceptional flexibility in how you fetch, pre-render and update the content that powers your web applications. In combination with Contentful — the headless content management platform — you can build, iterate, scale and deploy your content with ease.

In this workshop, Salma and Stefan will guide you through a fresh blog setup with Contentful and Next.js. You'll learn how to use Contentful's GraphQL API to generate dynamic pre-rendered static pages based on your blog entries, you'll explore the power of Contentful's Rich Text Field (it's so much nicer than a traditional WYSIWYG editor!) and understand how you can rebuild your website on content changes with either webhooks or Incremental Static Regeneration from Next.js.


1. Welcome

Let's have a look at the agenda today and make an action plan so that you have your new Next.js/Contentful blog set up at the end of the day!

2. Content model and setup

Learn how to set up a content model with different fields and references.

3. How to write GraphQL queries

Learn how to fetch data with GraphQL.

4. It's time to write some code!

Let's implement some data fetching and put it into your Next.js application.

5. Contentful Richtext — how does it work?

Let's understand and implement custom Richtext rendering.

6. Should you use next/image?

Let's implement next/image and a custom loader.

7. Let's deploy this application to Vercel!

Learn how to rebuild your static site each time you publish a change in Contentful.

8. Contentful ecosystem

Let's take a look at the powerful open-source tooling, extensibility and learning resources available at Contentful.