Getting Started with Headless WordPress with NEXTJS & WPGRAPHQL

what's up wordpress nerds in today's video we're going to be doing a very simple headless wordpress project with next js if you are new to the channel make sure to subscribe and ring the bell to make sure you get notified of my weekly wordpress videos and on top of that if you are interested in any sort of caching plugin for your wordpress site make sure to check out wp rocket which is my favorite plugin for caching for wordpress there is a link in the description if you end up buying a license i get a little bit of a kickback um all right so what we've got here is i have a local wordpress site headless wp next.local and this is going to serve as our cms it's going to be what where our content lives and then we're going to be using next.js to render that content and so all we really have to do with this wordpress site is just make sure that we have a graphql server that's going to be able that we can hit with next.js and read the content from so what we're going to do is we're going to add a new plugin and we're going to search for wp graphql and it is a plug-in play plugin that will spin up a graphql server for us all we have to do is activate it and then now we've got this lovely graphql button down here with a graphical ide so we can play with creating queries and things like that right here so now over here on the right we can see exactly what these queries will output so we can use that in our next js app and speaking of our next js app let's uh make sure that we have node installed so let's do node dash v and i'm on 15.4 as the recording of this video and you're going to need node as well in order to follow along here so if you need to install a node just simple google search and you can just install it right away so in order to get started we're going to do run npx create dash next dash app it's going to ask us a question about what we want to call our project i'm going to call this headless wp next video and that is going to install it in the current directory that i'm at underneath that project name as a folder name so this should be fairly quick here i'll pause the video while it does its thing all right now that it's done it says that we suggest that you try typing cd headless wp next video oop i probably should spell it right and then it says to run npm run dev which is great if we open that up we should see that beautiful next js default page which we do all right let's cancel that and i make sure that i open this all right there we go now we'll run npm run dev now i've got all my files over here on the right can't start without those um but kind of like as we're seeing here up over here like it's just got our our home page here and then it just kind of links off to the documentation and all that what we want to be doing is we want to let's start off with creating a list of posts that you can visit kind of like on your homepage you have a list of the posts that are available to your readers so we have goodbye mars and hello world so let's just start by creating a new index page if we go under pages we have an index.js and this is all the stuff that we see over here so we're just going to straight up and we're going to delete everything that we see inside of here the way that next.js works is that you need to export a component that is going to serve as the page that you're in so we're in the index.js so let's export a function call it home this is going to take some data but we'll get to that in just a second and let's return just an h1 and call this hello from the home page let's hit save and go back over here refresh and now we've got our hello from the home page and you can kind of continue on with that if you want to make an about.js and all that kind of stuff you can you can absolutely do that but we want to fetch our content dynamically we want to make sure that we can make a page for every single item that we have in our database here in wordpress before we get to that we want to fetch all of those pages and then display them here on the home page so people can click on them and visit each page individually so the way that there's a couple different ways that you can go about rendering content but we want to pull this information dynamically and so in order to pass information into here that we can then use we need to use a function or export a function asynchronously and it's specific to an xjs this is a function that you need to type in exactly like this it's called get static props and what this will do is that we can run inside run our query inside of here we can go query that our graphql server that's being housed over here you can double check to make sure that's working by going to slash wp graph or just graphql and if some of this error message pops up that means that it's working correctly so we have a place that we can go query so let's uh copy and paste this over so you don't watch me mess up typing it but we're just using the fetch api we're going to await the fetch we're going to fetch that graphql url and we're going to post to it we're going to send over some json and that json looks a little bit like this so the body is going to be json.stringify and we're going to have um an object with a key of query and that query is going to be this uh string and let's take the one let's create that query over here so we don't just use the one that i had pre-made let's delete this so you can kind of see what it looks like let's delete everything inside of here so we have a query of home page query and over here on the left we can kind of cherry pick the information that we want so we have posts right here we can click into that let's grab the nodes from there and then let's grab the slug because we're going to use that as the href and in our links to those pages and we're going to use the title as the text for those links so if we hit run up here at the top it comes back with an object that has our slug and title for every one of the pages so let's take this query and let's go and just replace this here so that's going to um be fetched and we should get this exact object that we see over here and we want to take that response that we're getting and we want to turn that into json so if you worked with the fetch api this should look very familiar so we're going to wait for that response and we're going to turn it into a json and what we want to do is we want to take all that information that we got and we want to return it we want to return it return an object with a key of props and inside of that it's got an object with a key of posts and that's going to be the json data posts of what we just got from the server and through magic next js grabs this get static props the result of it and passes it here so what we can do is we can um set that as variable and get posts from from that and let's just change that now let's let's keep that and let's just do a div around it so it won't yell at us so we'll have hello from the home page um and let's just double check to make sure that this is looking good so let's console log posts let's go back over here and it looks like oh we are not going to be able to see that we've got an object coming back and it's got posts and inside there's two nodes and one has this information in it of goodbye mars and the other one has that of hello world so now this is uh ours to do whatever we want with so let's just map over it and create a list of our posts so let's do post.nodes.map and we're going to use the post inside of each one and then we're going to return um a ul we're going to make sure that we need a key for that and that's just going to be post.slug that's going to be unique we have an li in here and let's do post.title let's get rid of that post.title so we go back here now we have two items in our unordered list we have goodbye mars and hello world so so far so good we have a list of the pages that we would eventually like to visit and we'll come back here when we want to actually link them to those pages because right now they don't exist so the next thing that we're going to do is now that we know how to query for information and then display that information let's create some a couple of dynamic pages so we have this pages folder and it's very easy to create additional pages in here and you can do some pretty interesting things with it what we want to do is we want to have our our structure look a little bit like this if i'm going to come back over here and it's going to look something like my site my site dot com slash post slash you know the slug of whatever our pages in this case you know it'll be like hello world something like that hell world uh hello world and so next.js makes it very easy to accomplish that so all we have to do is create a folder in here called posts and so that'll give us that first level in our url structure and then we're going to create a new file in here and we're going to use square brackets and this will be called slug dot js it's very specific to that next.js is going to know what we're talking about here so we want to use the slug and so inside of here we can um we're going to be doing some of the things that we just saw a second ago but we're going to add on top of it a little bit the first thing that we want to do is we want to export default our function called post and that's going to eventually receive some data right because we're going to have to query for each individual post and so let's do what we did earlier and um grab the get static props function here so let's paste that in just below it and we want to query graphql for an individual post now it's a little bit difficult more difficult to like do that back here in the ide because we're going to be working with variables so i'm going to kind of just paste this in as i've got it written over here in my notes and i'll explain it to you as uh it becomes important so inside of this git static props we need to query close that over there our graphql endpoint we're gonna post to it we're asking we're gonna send send it some json and in that json we're going to stringify an object and it has two keys in here one is query and the other is variables now variables is going to be an object that has two items in it the first is going to be id it's going to be context params slug get static props passes in an item called context and inside of there you can grab the slug of the current page that you're on so if we are on let's say i've got this uh you know my site dot com slash post slash hello world we're gonna get hello world right there for that slug and so what we can do is we can query wordpress through graphql and grab a post with that slug now there's other ways that you can query post you can do by id like database id or like global ids or stuff like that so you need to tell it what type of id we're working with and in this case we are working with a slug so we can grab the slug and tell it that we're working with a slug right there inside of the variables object and then we've got the query now we need to pass those variables into here into our single post query and then use those variables right here and we're going to grab the title the slug the content the featured image and that source ul source url for that image hopefully that makes sense once we get that we're going to turn the results of that into json let's collapse this we're going to turn that into json and then we're going to do something very similar to what we just did we're going to return some props with the individual post data inside of it now that's only for that individual page now what we need to do in addition to that is we need to tell next js what paths we want to make sure get created when the build happens so we know that when we visit that page we need to grab this information but we need to make sure that those pages are created at build time because what we're going to do is we're going to pre-render all of these components so when we do npx or npm run build it's going to run this query see that we have two pages and it's going to build a page for each one and then it's going to run get static props on each of those pages and grab the content for each of those pages if that makes sense so we need to tell next that when somebody goes to or when we build we need to build all of our posts so there's another function that's built in just like kinesthetic props is built in and it's called get static paths so we need to build all the paths out for our site here for this particular route and the way that we're going to do that is we're going to let's uh create another query here actually we've kind of built a couple queries so let's just copy and paste it in you guys know how to create a query so we're going to query our graphql server it's going to be post we're going to use the method of post we're going to send over some json and our query here is going to be called all posts query and we're going to be grabbing all of the nodes i think we only really need the the slug here um but i grabbed some extra information for some reason maybe i'm forgetting why and then i'll run into it in a minute so we're going to get all of the posts in our wordpress website and then we're going to take that we're going to return some json we're going to get some json back we're going to wait that and then we are going to just kind of dig into that a little bit to make it a little bit easier we're going to just assign a constant and we're going to make that equal to json.data.post.nodes because it's a lot of um levels deep and it makes it a little bit easier and then what we need to do is we need to return a set of paths so we need to assign paths right here we're going to assign fallback to false because if we don't it messes a lot of stuff up because we don't have any fallbacks set up so it's just going to 404 if it can't find what we're what it's looking for but we need to set up some paths and so what we need to do is set create an array of paths so we're going to create an array of paths like this we're going to take this post variable we're going to map over it and we're going to return an object with params and it's going to set the slug to the slug that we got back from our query up here and so that will give us give us an array of paths that we that next gs will then build for us so once we've gotten that that should you know when we run build it she'll create all those and then when we visit each page it knows exactly what uh to grab so let's just uh console logs some of the stuff that we got here so let's just return just an h1 this is howdy again and let's console log data all right so let's go get back here and visit our site let's do hello world so we've got howdy and we have an object that we can look at so data posts it's got our content in there welcome to wordpress this is your first post our featured image which has our url in there and it's got our slug and our title let's close out of that and let's actually render this out now the first thing that we're going to do is let's just get rid of this we need to wrap everything in a div and let's have our new constant here we're just going to make this data.post because i like working with post a little bit better and we're going to have an h1 up here and that's going to be post.title and we're going to have an article where we're going to dangerously set the inner html of post.content so now we get hello world and welcome to wordpress so if we were to do goodbye mars we have goodbye mars and another post for us to work with another thing that i think is worth noting here is that next gives us a component for working with images and now there's a lot that we can go over here but long story short it's a component that you can use just like this you have it you open it you give it a width and a height and the source and so we're going to post.featuredimage.note.sourceurl which we just saw a second ago we're gonna hit save refresh oops uh invalid source prop yep and this is something that i was actually expecting i was unexpectedly expecting this so next is very careful to make sure that you're only bringing in images that it that you are from trusted sources and so there is a next config file that we need to create next oops next.config.js let's paste this in here module.exports images domains headless wpnext.local just making sure that the stuff that you're bringing your images in are trusted so we're going to cancel out of that run div and we're going to restart it so it knows about our whitelisted domain here so now we have goodbye mars we've got our image in there and then our content down below so very cool now we can visit these um posts manually just by changing the url but let's go back to our home page just to kind of wrap things up now we can't click on any of these which is unfortunate so what we've got is we can use a component in next called link and this makes it so when you are visiting links internally it'll kind of do some magic to make them load fit a little bit faster it'll pre-fetch them and it'll kind of feel like a single page app so it does some pretty good stuff there and so we're going to replace this li with link so all right we're going to need the li as well don't want to replace it so we have our li and then we have link and then it's going to have an href and you're just going to say posts and then the post slug and then inside of there the post title so if we refresh this we should now be able to click on these so if i click on goodbye mars it'll take us to goodbye mars and if i click on hello world it takes us to hello world now we can you know npm run build and it'll statically create these pages for us and it'll make it so that all of this and all this can be deployed to a server as static html and it makes it extremely fast and this is an extremely easy way to kind of get up and running with next js so i hope you guys learned something in this i know this is very simple it's meant to just kind of get us up and running with it and i would absolutely love to continue this i just want to make sure that this is something that you guys are actually interested on in it before you know i put all the work into going over all this because not only does next js statically generate pages just like we've seen and we can kind of see right here if we were to look at you know our stat are not our static our pages posts our goodbye mars html it has all of that static html just you know written out there for us but you can also do things on the server side so like let's say you have a page that's you know looking at stocks or bitcoin prices or something like that and it needs to be updated every time somebody refreshes or something like that there's ways that you can fetch this information from wordpress dynamically and on every single page load so you're not having to re-run a build every time every time that you need to update information so there's lots of things to go over and i would love to continue this just let me know in the descr in the comments below if this is something you're interested in i'd like to say thank you to my patrons who have been supporting me and if you guys are interested in becoming a patron i do exclusive videos just about every month on more advanced topics like this about deploying wordpress with git um setting up we're going to be doing js testing with with cypress here in just a little bit and all sorts of good other things and i'm open to suggestions as well anyway thank you guys for watching and i will see you in the next one [Music] you

Channel: WPCasts

Views: 8,009

Rating: 4.9638553 out of 5

Keywords: headless wordpress, headless wordpress react, web development, javascript tutorial, headless cms, next js wordpress graphql, wordpress react, headless wordpress react graphql, wordpress headless cms react, headless wordpress react theme

Id: bIc6NrPsHjs

Length: 26min 38sec (1598 seconds)

Published: Wed Mar 24 2021

Reddit Comments

[u/Dixosaurus]

Please do a video on blog post comments, where they can be submitted from front end and incrementally rendered. That would be a huge help.

Benjamas put a post up describing the process of doing this for backlink.io

[u/3oR]

Would you say it is easier to get into headless with Gatsby vs Next.js?