Next.js Dynamic Routes with Contentful's GraphQL API — with Jason Lengstorf

⚠️ This post is over two years old and may contain some outdated technical information. Please proceed with caution!

I sat down with Jason Lengstorf to talk about Next.js and teach him how to generate dynamic routes powered by the Contentful GraphQL API.

In this video, we cover:

• Intro and a bit about my background

• What I like about Next.js and Contentful

• Thoughts on GraphQL vs REST

• GraphQL is more environmentally friendly than REST and making tech more accessible to hobby developers

• Planning today's project

• Setting up the content model in Contentful

• Adding entries to Contentful

• Installing the GraphQL Playground app in Contentful

• Building the GraphQL query in the GraphQL playground

• Creating a new Next.js application and using the GitHub CLI and Netlify CLI to set up environment variables to deploy

• Using getStaticProps to fetch data for the home page via the Contentful GraphQL API

• Building a list of client-side anchor links using next/link

• Using getStaticPaths to create dynamic routes at build-time

• Using getStaticProps to fetch data for individual dynamic routes with GraphQL

• Styling the front end

• Deploying the site to Netlify

I had a great time on Learn with Jason — and learned a few things along the way, too! I'm excited to speed up my development and deployment process using the Netlify CLI next time I launch a new project.

Thanks for having me, Jason!

Click the video above to play

Resources and links

• https://graphql.contentful.com/

• https://jamstackconf.com/2021-videos

• https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

• https://twitter.com/jamstackconf/status/1446132787480649735

• https://github.com/whitep4nth3r/nextjs-contentful-blog-starter

• https://jamstack-memories.netlify.app

• View the video transcript