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

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!

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://twitter.com/jamstackconf/status/1446132787480649735)
• https://github.com/whitep4nth3r/nextjs-contentful-blog-starter
• https://jamstack-memories.netlify.app
• View the video transcript