Salma Alam-NaylorI 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
