Next.js + Headless CMS + GraphQL - Next.js tutorial for beginners (part 2)

You will learn how to implement Headless CMS to your Next js application using GraphQL. We will integrate Next.js blog application with a Headless CMS for fetching the blog content. You will learn how to use GraphQL for fetching the blog data from the Headless CMS. This is part 2 of "Building a blog with Next.js" series. Watch the part 1 here: https://www.youtube.com/watch?v=giHGL3ZppTQ

⚡ DatoCMS: https://datocms.com/

PART 1: https://www.youtube.com/watch?v=giHGL3ZppTQ

Github repo for this project: https://github.com/tumetus/cooking-with-tuomo
How to deploy Next.js app: https://www.youtube.com/watch?v=vFjlw3LaAcw
Learn Programming (Skillshare FREE trial): https://skl.sh/3cYxUP5

My courses:
React basics: https://skl.sh/2XAKn7u
HTML & CSS for beginners: https://skl.sh/34wvGUH
Draft.js basics: https://skl.sh/3cJ5Hw4

Connect with me:
Website: https://tuomokankaanpaa.com
My newsletter: https://tuomokankaanpaa.com/newsletter
Twitter: https://twitter.com/tumee
Skillshare: https://www.skillshare.com/r/user/tume

Timestamps
00:00 What this video is about
00:32 Clone the starter app
01:50 What is DatoCMS?
03:02 Action steps for this video
03:39 Create DatoCMS account
05:11 What are models?
06:27 Create models
08:44 Add fields to models
13:29 Add metadata fieldset
14:22 Add content to the CMS
18:34 Start working on the code
19:43 Add necessary GraphQL functions
21:18 Add GraphQL API token to environment variables
22:40 Add CMS data fetching to front page
26:00 Modify front page to work with new data
28:30 Use DatoCMS Image component for images
32:12 Add CMS data fetching to Blog post page
38:09 Modify Blog post page to work with data
39:42 Add StructuredText component for content
40:57 New blog post with images
41:49 Create new block to display images
42:34 Modify content field to work with Image block
43:25 Create new blog post with images in content
45:03 Add renderBlock prop for StructuredText
49:40 Add build trigger to build site in production

#nextjs #beginner #tutorial