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
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?
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
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!
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
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
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'
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
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
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?
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
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
@@WPEngineBuilders I was hoping for remix, wordpres headless and vercel free hosting tutorial. I don't have money for WPEngine as the hosting provider.
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
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?
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.
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.
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 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
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
This is the best, easy to understand. Thank you so much for your effort.
Wow, thanks for the kind words - JE
amazing easy tutorial, i used it for my custom post type and everything works great, specially for the HTML generation for SEO
this is exactly what I haven been looking for. great tutorial
Thanks for the kind words, happy coding - JE
Awesome tutorial. Straight to the point!
Awesome! Thanks for the kind words and thanks for watching!
Thank you for this! I was completely lost about how to get the data from point A to point B.
Amazing Tutorial, thank you very much!
Awesome, thanks for watching -JE
There are not enough words to appreciate your efforts! Really amazing 💯
Aww shucks, thanks for the kind words, and thanks for watching - Jeff
Amazing one. Thank you for this
Thanks for watching! - JE
Thank you
Jeff, thank you so much for this video. The instructions provided worked perfectly in my app. Much ❤
Thank you so much. Can I add categories using the gql.
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?
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
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!
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.
Thank you so much for this!!!!
Thanks for watching!
Nice work!
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
I greatly appreciate the setup and I’m going try “local” instead of WAMP. Looks better thank you 🙏
oke, thank you very much.. have a nice bro
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
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
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
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
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 =)
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?
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.
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
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
thank you dude!
You're welcome, thanks for watching!
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.
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
It's works with nextjs 13 ?
We're working on that piece of content using the app directory
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
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/
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.
What is this thing you clicked create new site on?
Local by FlyWheel
@@brucemartin6542 okay, thank you
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
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