Build a Headless WordPress Site with Next.js and WPGraphQL

Headless WordPress resources:

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: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
8:55 - Reload Environment Variables
9:13 - Configure Apollo Client
11:38 - Implement Apollo Provider
17:27 - Create GET_ALL_POSTS Query in GraphiQL IDE
19:39 - Use gql to Query with Apollo Client
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!

[tedspens]

No fluff, no bells and whistles, no captivating personality (nothing personal 😁), just straight forward, step by step instructions. I wish every instructor would follow this format. My issue was getting data to dynamic pages. Thanks to you, I finally have it working. Thank you!
On a side note, I'm using SvelteKit and ideally will apply what I learned here. But I might just save myself a lot of headache and stick to NextJS. Anyway, thanks again. Subscribed! 👍

[dontbothermeidiot]

This is the best, easy to understand. Thank you so much for your effort.

[SexyBast]

This is by far the most straightforward explanation of headless WP, NextJS and Apollo integration I've seen so far. Thanks a lot for the great educational content.

[pick_pick_pick]

amazing easy tutorial, i used it for my custom post type and everything works great, specially for the HTML generation for SEO

[qavinizamani]

There are not enough words to appreciate your efforts! Really amazing 💯

[JustinUrich]

Extremely thorough tutorial, Jeff. I appreciated your teaching style of explaining in clear detail exactly what each line/section of your code was doing. Only negative feedback I have is the intro and outro music 😂 Question: For your posts detail page — are you statically generating for all known URLs? I was confused by the usage of posts = [] and what exactly it meant in that context.

[SkyrimBeast]

Jeff, thank you so much for this video. The instructions provided worked perfectly in my app. Much ❤

[chrismartinez]

Awesome tutorial. Straight to the point!

[abenjamin]

I greatly appreciate the setup and I’m going try “local” instead of WAMP. Looks better thank you 🙏

[traveltheworldandcode]

this is exactly what I haven been looking for. great tutorial

[alexmaldonado]

Great video, thanks! Also instead of copying and pasting when changing directories in the terminal you can use the autocomplete feature. Type cd and then type the first letter or first few letters of the directory you want to cd into and press tab to autocomplete!

[SiBtoday]

Amazing Tutorial, thank you very much!

[shravyahegde]

I have tried this example exactly the same. but on opening the site locally it's not showing the posts page. instead, home page contents includes
"A commitment to innovation and sustainability". Am I missed anything to load posts on the front page?

[devio]

Thank you <3 However I am facing an issue with if I make any changes in JS files it reflects immediately but changes done in the WP ADMIN back-end don't reflect immediately I have to run **npm run dev ** every time to see the changes. Please help if I am missing anything.

[mjohnson]

Great tutorial! Question... what would be the next steps from here, like... displaying images, loading pages with different layouts, etc?

[ASEVEN_STAR]

oke, thank you very much.. have a nice bro

[enricosimonetti]

Great course!

One thing that I couldn't grasp yet is to understand if the WordPress instance could be brought up and down during static site generation only, as an "admin ui" or it needs to stay alive. And if WordPress can be off most of the time, where would the occasionally fetched data stored?

The use case im thinking of is a user brings up WordPress, adds or edits posts, a github sction script runs and generates the static website, which will then be served statically until the next edit.

Thank you foe your hints!

[thedigitalceo]

Is there any benefit
to doing this with graphql instead of simply pulling data from the Wordpress json endpoints?

[zacharystout]

Can this work with an already existing WordPress site? Would I be able to convert a current WP site to headless?

[Light-]

why i dont run npm run dev after create file .env.local
my terminal say EPERM: operation not permitted, open