Wordpress Headless CMS, GraphQL, and Nextjs - Let's Build a Blog

sometimes wordpress gets an undeserved bad reputation but when you use it as a headless cms and combine it with an amazing framework like next.js it's actually pretty sweet so that's what we're going to do in this video we'll show you how to set up a blog using wordpress and next.js in just a few minutes all right so like we said we're going to use wordpress as a headless cms we're going to actually set up and install a wordpress instance in hostinger which is the sponsor for this video we're going to use next.js to pull that data and we're going to use graphql to be able to pull that data into our next.js application we are going to use some starter templates from our a starter template from colby fayak on github so you have a link to that repository that will basically take care of all the things we need we'll just need to connect it with one endpoint one url to point to our actual actual wordpress instance so let's go ahead and dive on in all right so to help us set up this uh next js and wordpress integration we're going to use the next wordpress starter template on github and this is from a good friend of mine and an amazing content creator named colby fayoc and this thing is basically just going to be a project that is going to connect to wordpress it's going to use the wordpress graphql api we'll talk about graphql here in a second it's going to query all the data create the landing page for the blog post and the template the dynamic template for each individual blog post itself so it really takes care of everything we need if you have wordpress if you want to use nexjs you can use this template the starter and have everything you need so i'm going to go ahead and clone this thing and by the way you'll have a link to this repository in the description of the video i'm going to cd into my code and my delete me repository or my folder this is where i put stuff for testing and for demos then delete it after and then i'm going to do a git clone on this repo once this is done we'll open this up so the next wordpress starter we'll open this up in vs code if you're interested new to vs code i've got tons of videos on customizing and getting everything out of vs code so you can go and check those out uh but after i got this open i've got a kind of a straightforward wordpress or excuse me next.js setup here and if we look inside the package.json there will be a function in here for apollo clients so this is using the apollo client to send graphql requests to the wordpress backend now how do we know where that is well it comes in an environment variable in next.js so if we come i'm going to close out the terminal here and if we look inside the github repository it says that we will need to add an nv.local file this is where we can do environment variables while we're testing in next.js and then add this wordpress graphql endpoint so let's go into our repository at env.local add in the wordpress graphql endpoint and this is the one single endpoint with graphql of where you send all requests so we will need to get this from our deployed version of wordpress which we'll get to in a second and then just to kind of explore a little bit inside of source inside of pages we've got a few things that are important there is the post page this thing is going to make a request in static props to get the paginated post so there's pagination already built in here super neat um it's going to grab a series of posts and then use that to build out this post page there is also under slash post there is a slug a dynamic route in xjs which is really neat and this is for the individual post itself this is going to display all of the information for each individual post so again all of this stuff is taken care of we can't run this yet because we don't have that property set in our local file so what we need to do now is go ahead and get set up with a deployed instance of wordpress now there are lots of different places that you can host a wordpress wordpress site or wordpress for the purpose of a headless cms or a back-end but we are going to use today's sponsor which is hostinger now hostinger has a few different plans in here and the thing that i really like for them one if you pay over the course of several months or a year or two the price per month is a few bucks a month which is really nice and then in the premium and or business tiers you can host up to 100 websites so if you're a freelancer or if you're a developer that just has a few different sites whatever the case may be you can do all of that with one plan here on hostinger and don't forget you can use the coupon code james to get a total of 90 off of the plan that you select this is one of the cheapest plans that i've seen for hosting wordpress and especially for hosting multiple instances of wordpress so i'm going to log in and get into my dashboard log in with my github account and i will say the dashboard here is one of the better looking dashboards that i have seen so i haven't done a ton with hosting wordpress's wordpress's uh but i really like this one and i have enjoyed it so far so i've got a premium shared hosting and a business shared hosting set up here or not set up and so what i'm going to do is go ahead and get started with those so i'm going to go to the premium shared setup i'm going to start that setup process by the way if you choose either one of those plans you need a free domain so you can get your free domain there and i'm going to go ahead and start and i'm going to use an existing domain now i have a domain in namecheap called jschallenges.com keep an eye out for that because i'm going to build out some content around javascript challenges and you might wanna see that in the future so i've got this one here i'm gonna go into manage and just show you uh that i've customized the dns in here so this custom dns is now gonna point to the name server servers of hosting here so we'll see that in a second and i'm going to use my existing domain that domain is js challenge challenges if i spell it right jschallenges.com we'll continue in here all right that looks like it's good to go all right and then uh we're gonna build a brand new website we're not gonna migrate anything we'll build a brand new one they have a one-click install here for wordpress again really good stuff here so we'll do wordpress it's gonna ask us what my email is for uh the master account and then i'll give it a password as well so this is after this wordpress account or uh installation finishes we need a master account to be able to log into the the wp admin portal and update posts and that sort of stuff so that's what that is so we'll continue we don't need a template we actually don't care at all about the front end because we're just using this as a back end so we can just leave it there all right so just to recap this is jschallenges.com it is based in north america usa which is where i am we are installing the following cms uh wordpress and then my admin email is that email there so uh we'll let this run it may take a minute or two and then we'll see what we got it's loading so now everybody say hi to my special guest in the back this is what we do when things are loading all right so it looks like that thing has finished up let's go ahead and uh go into the manage wordpress that's what i want to check out first just to see that this thing is fully installed it's set up um i don't know what the uh the wizard is i'm just gonna go back to the dashboard here because i don't need to worry about seo this is just for the back end and cool so this thing comes with a few different extensions and plugins and stuff installed and you can kind of clean that up if you're a wordpress person you could decide what you want what you don't want all those things but what we do want i know for sure is the graphql plugin so let's take a look at the documentation and let's just see if he references that inside of here so we need the wp graphql this is a graphql api for wordpress it basically just sits on top of the built-in api of wordpress and then adds graphql on top of it so let's do a search for wp graphql inside of our wordpress dashboard inside of plugins we will add new and then we'll give a search for wp graph ql cool so there that is right here we will go ahead and install that thing and after it's installed we'll need to activate it so we'll make sure the thing is active and then it'll be really cool we'll have like a graphical interface where we can explore the different graphql endpoints not interfaces endpoints and be able to see uh how to query the data and what data gets returned uh while it's installing just so you know there already is a hello world post that is created so it has some dummy data already created for you we'll take a look at that in a second but as soon as this finishes installing we will activate it and then be able to start using it in our next js application all right so that thing has finished installing let's go ahead and activate this thing and we'll see up here i believe we'll have a new tab for our graphical ide so let's go ahead and take a look at that so inside of here if you've ever used graphql before you can you probably have seen like one of the graphical editors but if i wanted to query uh post maybe um so let's say we can a query with a post with a specific id we probably more likely would start with ah actually i'm in the wrong spot sorry this should be posts instead of posts so in here get rid of the individual post if we query now our post and then look for the title uh or see what am i missing here edges node and then title does that seem to come out is that going to query all of them cool so we see we've got one here that has a title of hello world which is exactly what's in the dummy data inside of post so if we go to post and we do all posts all right so we've got those posts there i'm going to open up the control panel in hostinger to show you uh what we have there and uh there is a force https on here so we do want this to be https so we can install an ssl certificate let's go ahead and install that thing that will make sure that we're able to access this from https.jschallenges.com so it's being installed it will automatically be forced on your domain when it's finished so we can go ahead and check that i think the processing of that needs to finish so we'll come back to it in a second oh cool already there i didn't even have to pause the video that thing is successfully enabled so that's good and then we can make sure that this is working if we come to visit the site and then if i uh copy paste the whole thing so this is https so that thing is working as it should and then what we can do is grab that full url and if we look back at the documentation in github we can see it's basically just our url for our site and then slash graphql so that's the endpoint so we'll do jschallenges.com and then graphql that will be the endpoint now keep in mind the starter template that has all all we've done so far we will need to install all of the packages all the dependencies so we'll let that let that go and run but again this is coming from this template from colby fayock here in github and we added our hosting for a wordpress site basically as our headless cms in hostinger with that thing uh installed we added our extension extension for graphql and now we're trying to get that up and running now if you didn't know this i do want to share i have recently started a podcast with amy dutton called compressed fm where we talk about we do weekly episodes on web development and web design so if you're interested in learning more about those make sure to check us out on spotify and anywhere else that you listen to podcasts so make sure to check that out and let's go ahead and check looks like all of our packages have installed let's do an npm run dev now and see how this thing uh hopefully is up and running so let's open this up on port 3000 and it may still be loading for a second i'll take a sip of coffee and then we'll see what we got all right and it is up and running so this is uh this is the default template here notice i've got the hello world uh blog post that is there and then also if you look in next gs you can see it's doing lots of stuff for us so it's generating those dynamic pages based on the slug it's doing a site map it's doing a feed xml it's basically everything you would need in a complete starter which hopefully is what you expected so let's do one more thing let's go into the wordpress dashboard let's go back to the dashboard here and let's add another post so let's go into post let's do an add new oh and this is the new like gutenberg editor i think so let's call this a testy test post uh post title is fine let's scroll down to have a little bit of content inside of this let's just add a piece of text content a paragraph say hey this is a really good post all right so let's go ahead and publish that if that thing is published then um the pages inside of our js challenges are built statically so this won't show up so what we need to do is actually restart our site so that it goes through another one of those build processes to processes to grab all of those posts let's start let's start this up one more time and we should see this new post is live ready to go on our local next.js site all right looks like that thing has finished let's give a refresh to our page hopefully what we'll see is now we have two posts sweet so there's our testy test and there's our hello world so all that stuff is working and connected the template did most of the work host singer did the hosting and then it was all up and running all right so that was pretty sweet i really enjoyed this next.js is my favorite framework i love the idea of wordpress as a headless cms i think sometimes it gets written off but it still is super useful and especially if you're doing client work clients non-developers even developers are pretty familiar or often familiar with wordpress so it makes sense as a back end i do want to do i've been doing community shout outs at the end of my videos i've already done it a couple times but definitely check out colby fayak on on twitter on youtube in a few different places and especially his next.js wordpress template on starter template on github so make sure to check him out as the community shout out for today hope you all enjoyed it let me know if you have used wordpress as a headless cms and if you may be interested in using it now and then maybe where you would host it if you had the opportunity as well so put those in the comments below let me know i hope you enjoyed it thanks for watching and i'll catch you in the next one

Channel: James Q Quick

Views: 58,602

Keywords: wordpress headless cms, wordpress api, wordpress blog, wordpress and nextjs, nextjs and headless cms, nextjs tutorial, build a blog with next.js, wordpress hosting hostinger, how to host wordpress, wordpress and graphql, wpgraphql, headless cms, headless wordpress, wordpress react, web development tutorial, jamstack, wordpress rest api, headless cms tutorial, headless wordpress tutorial, web development 2021, next js wordpress graphql

Id: YZR6P6Q0tmc

Length: 14min 55sec (895 seconds)

Published: Thu May 27 2021