Build a Headless WordPress Site with Next.js and WPGraphQL
Вставка
- Опубліковано 30 лип 2024
- 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!
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.
Wow, thanks for the kind words. Glad it was useful to you!
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! 👍
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
Awesome tutorial. Straight to the point!
Awesome! Thanks for the kind words and thanks for watching!
There are not enough words to appreciate your efforts! Really amazing 💯
Aww shucks, thanks for the kind words, and thanks for watching - Jeff
I greatly appreciate the setup and I’m going try “local” instead of WAMP. Looks better thank you 🙏
Jeff, thank you so much for this video. The instructions provided worked perfectly in my app. Much ❤
amazing easy tutorial, i used it for my custom post type and everything works great, specially for the HTML generation for SEO
This is the best, easy to understand. Thank you so much for your effort.
Wow, thanks for the kind words - JE
Nice work!
Amazing Tutorial, thank you very much!
Awesome, thanks for watching -JE
this is exactly what I haven been looking for. great tutorial
Thanks for the kind words, happy coding - JE
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!
Thanks for the kind words and great tip!
oke, thank you very much.. have a nice bro
Amazing one. Thank you for this
Thanks for watching! - JE
Thank you so much for this!!!!
Thanks for watching!
Thank you so much. Can I add categories using the gql.
thank you dude!
You're welcome, thanks for watching!
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?
Thank you
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.
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.
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
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?
You'll need to install this plugin to make ACF and WPGraphQL work together: www.wpgraphql.com/acf/
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!
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
@@WPEngineBuilders and again thanks a lot for that most helpful reply =)
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!
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
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.
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
Is there any benefit
to doing this with graphql instead of simply pulling data from the Wordpress json endpoints?
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: ua-cam.com/video/o-7-_oLq23c/v-deo.html
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?
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
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.
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
curios what you've used to create the video and add the webcam recording as well.
We all use an app called screenflow to record/edit videos
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'
This looks like a permissions issue with your machine
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? 🤔
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
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.
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.
Great tutorial! Question... what would be the next steps from here, like... displaying images, loading pages with different layouts, etc?
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/
Cool, thank you!@@WPEngineBuilders
Hi, I am getting the error: Module not found: Error: Only absolute URLs are supported
same
Me too. did you manage to resolve this?
@@walkonmars no 😂, I drop the idea and move to react app
What is this thing you clicked create new site on?
Local by FlyWheel
@@brucemartin6542 okay, thank you
It's works with nextjs 13 ?
We're working on that piece of content using the app directory
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.
Thanks for the feedback, I learned from this mistake in subsequent videos
Can you make a tutorial on how to use remix instead of next.js?
Boom, here you go: ua-cam.com/video/4jT7iKdqoW4/v-deo.html
Thanks for watching - JE
@@WPEngineBuilders I was hoping for remix, wordpres headless and vercel free hosting tutorial. I don't have money for WPEngine as the hosting provider.
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
=The actual error is "error - Error: Failed to parse URL from undefined/graphql"
@@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
Can this work with an already existing WordPress site? Would I be able to convert a current WP site to headless?
Yeah, that is what a lot of folks do is migrate a current site to headless. Any specific questions you have about the how/why?
@@WPEngineBuilders Hey thanks for getting back to me! Yeah, I was just wondering specifically how to perform a migration vs. a brand new project.