Build a Headless WordPress Site with Next.js and WPGraphQL

Рет қаралды 32,146

Күн бұрын

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: developers.wpengine.com/blog/...
GitHub Repo: github.com/JEverhart383/crash...
Headless WordPress resources:
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!

Пікірлер: 80

@SexyB3ast Жыл бұрын

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.

@WPEngineBuilders Жыл бұрын

Wow, thanks for the kind words. Glad it was useful to you!

@qavinizamani5889 Жыл бұрын

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

@WPEngineBuilders Жыл бұрын

Aww shucks, thanks for the kind words, and thanks for watching - Jeff

@chrismartinez5711 2 жыл бұрын

Awesome tutorial. Straight to the point!

@WPEngineBuilders 2 жыл бұрын

Awesome! Thanks for the kind words and thanks for watching!

@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! 👍

@WPEngineBuilders Жыл бұрын

If we get a subscription despite my non-captivating personality, I'll take it as a win! So glad to hear this helped you out. We have some plans to do some content on Svelte Kit, but that basics of what are in this video are about the same for all of the meta-frameworks. Thanks again for watching and the kind words - JE

@abenjamin13 Жыл бұрын

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

@SiBtoday Жыл бұрын

Amazing Tutorial, thank you very much!

@WPEngineBuilders Жыл бұрын

Awesome, thanks for watching -JE

@dontbothermeidiot Жыл бұрын

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

@WPEngineBuilders Жыл бұрын

Wow, thanks for the kind words - JE

@pick_pick_pick 6 ай бұрын

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

@traveltheworldandcode 10 ай бұрын

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

@WPEngineBuilders 10 ай бұрын

Thanks for the kind words, happy coding - JE

@SkyrimBeast 2 ай бұрын

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

@allure-md 6 ай бұрын

Nice work!

@alexmaldonado7209 Жыл бұрын

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!

@WPEngineBuilders Жыл бұрын

Thanks for the kind words and great tip!

@donjudejoseph6000 Жыл бұрын

Amazing one. Thank you for this

@WPEngineBuilders Жыл бұрын

Thanks for watching! - JE

@offthewallchess 8 ай бұрын

Thank you so much for this!!!!

@WPEngineBuilders 8 ай бұрын

Thanks for watching!

@afxcrush41 2 жыл бұрын

thank you dude!

@WPEngineBuilders 2 жыл бұрын

You're welcome, thanks for watching!

@ASEVEN_STAR Жыл бұрын

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

@victorfrancis1378 Жыл бұрын

Thank you so much. Can I add categories using the gql.

@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.

@WPEngineBuilders Жыл бұрын

Thanks for your kind words and feedback about our intro beats. You can statically generate all pages at build time if you pass all of the possible paths into that array, or even generate some by only including your most common paths. When we leave the array empty, we build every path on the first request and then use the static page for every subsequent request, so the first user to hit the page has a slightly longer request time. The getStaticPaths function is pretty flexible, so it doesn't have to be all or nothing. Thanks for watching, and happy to answer any other follow-ups - Jeff

@tsxpneo Жыл бұрын

Hi! Thanks for this tutorial, very helpful - one thing I'm still wondering about are dynamic routes with respect to hierarchically nested content structures. Most WP installations I've worked on usually have custom post types that are potentially hierarchical, but the same is true for subcategories or pages. Most next/react routing tutorials apparently assume there's only one dynamic slug element in a url. And that's not necessarily always the case - Eg, assume there's a page "Level-1" with two children "Level -2-a" and "Level-2-b". Here we could potentially still hardcode the "Level-1" part of the URI. But assume now, that an editor creates a third child page "Level-2-c" and then a child page thereof, "Level-3-a", which would result in a URI with two (and potentially more dynamic/slug elements): //level-1/{level-2-c}/{level-3-a}. Will this params from URI approach also work for routing in that case? If not, how could this be done? Could this be done? Thanks!

@WPEngineBuilders Жыл бұрын

Hi, Thanks for the awesome question! You're right that the routing here is pretty simplistic. One more advanced pattern I've seen is using a catch all route in Next.js and the nodeByUri query, I think this pattern better respects WordPress routing: www.wpgraphql.com/2021/12/23/query-any-page-by-its-path-using-wpgraphql

@tsxpneo Жыл бұрын

@@WPEngineBuilders and again thanks a lot for that most helpful reply =)

@JoseRomero-nc3gu Жыл бұрын

Nice stuff. Could you explain on a video how to deliver (upload) the app on nextjs. I saw Vercel as an option but maybe there is an easy way. Thanks.

@joshbarros1995 Жыл бұрын

Nice explanation! Thank you very much!! What if I try to add a non-existent postname on the url? Will the application break or should it throw a 404 page?

@enricosimonetti5050 Жыл бұрын

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!

@WPEngineBuilders Жыл бұрын

Thanks for the kind words. It kind of depends on how you build your site. If you statically generate everything at build time, then yeah you could shut off the WP site and serve just static files. In practice, we don't see a lot of people do that though - JE

@biLLie_wiLLie 2 жыл бұрын

thank you for this! Great video. It works. Question - I created an advanced custom field (events) and I don't see it in query composer. What should I do to see it. I want to publish not only posts. And second one - how to make contact form that sends emails from users to my email?

@WPEngineBuilders 2 жыл бұрын

You'll need to install this plugin to make ACF and WPGraphQL work together: www.wpgraphql.com/acf/

@thedigitalceo 2 жыл бұрын

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

@WPEngineBuilders 2 жыл бұрын

Hey! Yes, there are a number of reasons why you may want to use WPGraphQL instead of the WordPress REST API. Check out this great video for a detailed comparison between those two options: kzfaq.info/get/bejne/pZNnYMKgsdeWY5c.html

@devio7427 3 ай бұрын

Thank you

@tomm3416 Жыл бұрын

Great tutorial. The only thing I don’t seem to understand is how to automatically update the website. Now when I made a change I’ll have to save a file before its get updated on the website. Can I make this more user friendly? Maybe some sort of button in de backend where you can push your changes to the live website.

@WPEngineBuilders Жыл бұрын

Hi Tom, thanks for the question. This tutorial does not dive into the details of how these sites get deployed, but there are a few ways we typically handle things. 1) if you're making changes to the Next codebase, pushing those changes to GitHub would automatically rebuild that part of your site on most JS hosting platforms 2) if you're talking about the content in WordPress being updated automatically, that can happen as well in a variety of ways depending on how you've instructed Next to render your site. If it's ssr, you'll always get fresh data. If SSG, you can trigger a rebuild using a webhook on most platforms, and Next also has ISR, which is kind of an in-between mode where it is static but revalidated at an interval you define, and that is what we typically recommend. Let me know if you need more details on any of this - JE

@magimaartdeveloper7465 2 жыл бұрын

Great tut bro, i have a question. Is possible to post data from Nextjs App back to wordpress(mySql database). For example you have a form data of say a user {name:"John", age:12}, and one wants to post this data via graphql to wordpress, is this possible?? Or its only through wordpress dashboard that one can make a post request.

@WPEngineBuilders 2 жыл бұрын

Sorry we missed this comment, but yes that is possible through WPGraphQL mutations. But many of the popular form plugins also have APIs and WPGraphQL extensions, so it could be worth checking that out so that you can still use Gravity Forms or whatever plugin you use to build the form

@dryujin1004 Жыл бұрын

Thanks I learned alot from this tutorial. really appreciate it. I have few questions. one is, is it possible to create new data in next js, and then that data added into wordpress. last question is about 6:42 in your video, crashcoursesite.wordpress.xml file was imported to wordpress. what was the purpose of the import file?

@WPEngineBuilders Жыл бұрын

Hi, thanks for watching. Yeah, you could do that if you wanted but it would require authentication depending on the type of data. To create a post or page you would need to authenticate as a WP user, but a comment you could create without auth. That XML file was the basic WordPress export file of my content. Thanks for watching - JE

@AlexandruRada Жыл бұрын

curios what you've used to create the video and add the webcam recording as well.

@WPEngineBuilders Жыл бұрын

We all use an app called screenflow to record/edit videos

@mjohnson82 8 ай бұрын

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

@WPEngineBuilders 8 ай бұрын

I would recommend checking out Faust.js actually. It's built on top of Next.js, but offers a bunch of functionality out-of-the-box: faustjs.org/

@mjohnson82 8 ай бұрын

Cool, thank you!@@WPEngineBuilders

@Shawn-Mosher 2 жыл бұрын

I feel the only gotcha is dealing with wp-blocks editor content. Pulling in default styling from wp-blocks css and overwriting it to fit your needs or writing it from scratch is not ideal. I like the idea of replacing the content with a custom component using the wpgraphql content. Not currently implemented. The Gutenberg wpgraphql isn’t ideal either due to the deep nesting involved.

@WPEngineBuilders 2 жыл бұрын

Thanks for the comments, Shawn. We are in agreement that what you describe is still a common sticking point for building headless sites/apps. I know a lot of people in the community are paying attention to this problem, so hopefully this continues to improve.

@nx3057 Жыл бұрын

I wonder if there is a way to hide all post on wordpress but still be able to query and show posts on NextJS, any thoughts? 🤔

@WPEngineBuilders Жыл бұрын

Our FaustWP plugin does a lot of redirecting of public WP URLs to the frontend site, if that is what you mean. Faust.js is built on Next.js so it should be relatively easy to get started with: faustjs.org/docs/faustwp/settings

@Light-3121 9 ай бұрын

why i dont run npm run dev after create file .env.local my terminal say EPERM: operation not permitted, open 'C:\Users\Asus\crash-course-headless-wp-next-wpgraphql\.next\trace'

@WPEngineBuilders 8 ай бұрын

This looks like a permissions issue with your machine

@wilonweb 9 ай бұрын

It's works with nextjs 13 ?

@WPEngineBuilders 9 ай бұрын

We're working on that piece of content using the app directory

@DanteMishima 2 жыл бұрын

What is this thing you clicked create new site on?

@brucemartin6542 2 жыл бұрын

Local by FlyWheel

@DanteMishima 2 жыл бұрын

@@brucemartin6542 okay, thank you

@TheNamesJT Жыл бұрын

Can you make a tutorial on how to use remix instead of next.js?

@WPEngineBuilders Жыл бұрын

Boom, here you go: kzfaq.info/get/bejne/atCEasx8ydfTh2g.html

@WPEngineBuilders Жыл бұрын

Thanks for watching - JE

@TheNamesJT Жыл бұрын

@@WPEngineBuilders I was hoping for remix, wordpres headless and vercel free hosting tutorial. I don't have money for WPEngine as the hosting provider.

@rajtechnology9964 Жыл бұрын

Hi, I am getting the error: Module not found: Error: Only absolute URLs are supported

@ecomproz Жыл бұрын

same

@walkonmars Жыл бұрын

Me too. did you manage to resolve this?

@rajtechnology9964 Жыл бұрын

@@walkonmars no 😂, I drop the idea and move to react app

@ychinamale Жыл бұрын

Amazing content! 🎉 Could you reduce the volume of intro and outro music by 90%? I don't think it adds anything to the video. It only makes it very difficult to hear what you're saying at those points.

@WPEngineBuilders Жыл бұрын

Thanks for the feedback, I learned from this mistake in subsequent videos

@arielguzman1981 Жыл бұрын

For some reason my process.env.NEXT_PUBLIC_WORDPRESS_API_URL shows up as undefined. My .env.local file is in the right place, unsure why this is happening

@arielguzman1981 Жыл бұрын

=The actual error is "error - Error: Failed to parse URL from undefined/graphql"

@WPEngineBuilders Жыл бұрын

@@arielguzman1981 I would make sure you stop and restart your server as a first step. If you make changes to the .env file, you need to reload it so the new values are there