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

This content originally appeared on DEV Community and was authored by Salma Alam-Naylor

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

This content originally appeared on DEV Community and was authored by Salma Alam-Naylor

Print Share Comment Cite Upload Translate Updates

APA

Salma Alam-Naylor | Sciencx (2021-10-11T09:31:03+00:00) Next.js Dynamic Routes With Contentful’s GraphQL API — with Jason Lengstorf. Retrieved from https://www.scien.cx/2021/10/11/next-js-dynamic-routes-with-contentfuls-graphql-api-with-jason-lengstorf/

MLA

" » Next.js Dynamic Routes With Contentful’s GraphQL API — with Jason Lengstorf." Salma Alam-Naylor | Sciencx - Monday October 11, 2021, https://www.scien.cx/2021/10/11/next-js-dynamic-routes-with-contentfuls-graphql-api-with-jason-lengstorf/

HARVARD

Salma Alam-Naylor | Sciencx Monday October 11, 2021 » Next.js Dynamic Routes With Contentful’s GraphQL API — with Jason Lengstorf., viewed ,<https://www.scien.cx/2021/10/11/next-js-dynamic-routes-with-contentfuls-graphql-api-with-jason-lengstorf/>

VANCOUVER

Salma Alam-Naylor | Sciencx - » Next.js Dynamic Routes With Contentful’s GraphQL API — with Jason Lengstorf. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/11/next-js-dynamic-routes-with-contentfuls-graphql-api-with-jason-lengstorf/

CHICAGO

" » Next.js Dynamic Routes With Contentful’s GraphQL API — with Jason Lengstorf." Salma Alam-Naylor | Sciencx - Accessed . https://www.scien.cx/2021/10/11/next-js-dynamic-routes-with-contentfuls-graphql-api-with-jason-lengstorf/

IEEE

" » Next.js Dynamic Routes With Contentful’s GraphQL API — with Jason Lengstorf." Salma Alam-Naylor | Sciencx [Online]. Available: https://www.scien.cx/2021/10/11/next-js-dynamic-routes-with-contentfuls-graphql-api-with-jason-lengstorf/. [Accessed: ]

rf:citation

» Next.js Dynamic Routes With Contentful’s GraphQL API — with Jason Lengstorf | Salma Alam-Naylor | Sciencx | https://www.scien.cx/2021/10/11/next-js-dynamic-routes-with-contentfuls-graphql-api-with-jason-lengstorf/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.