Build a Headless WordPress Site with Next.js and WPGraphQL

In this crash course, you will learn how to build a simple headless WordPress site with Next.js and WPGraphQL. You can follow along with the step-by-step blog post with code examples here: https://developers.wpengine.com/blog/crash-course-build-a-simple-headless-wordpress-app-with-next-js-wpgraphql

GitHub Repo: https://github.com/JEverhart383/crash-course-headless-wp-next-wpgraphql

Headless WordPress resources:
https://developers.wpengine.com

0:00 – Intro
0:17 – Prerequisites
0:52 – Create a Local WordPress Site
2:13 – Check Permalinks
2:21 – Install WPGraphQL
2:54 – Enable WPGraphQL Debug Mode
3:29 – Setup Next.js App
3:40 – Clone GitHub Repo
4:38 – Install Dependencies and Run Dev Server
5:55 – Import WordPress Data
7:08 – Connect Apollo GraphQL Client to WordPress
7:38 – Create .env.local file
8:55 – Reload Environment Variables
9:13 – Configure Apollo Client
11:38 – Implement Apollo Provider
14:03 – Next.js and Page-based Routing
15:26 – Implement Data Fetching in index.js
17:27 – Create GET_ALL_POSTS Query in GraphiQL IDE
19:39 – Use gql to Query with Apollo Client
22:39 – Next.js and Dynamic Routing
24:43 – Dynamic Routes and getStaticProps
26:20 – Optimize Dynamic Routes with getStaticPaths
28:02 – Create GET_POST_BY_URI Query in GraphiQL
31:02 – Use Variables in Apollo Client Query
34:26 – Congratulations!