Practical Guide to Headless WordPress  🔗 **Source:** [Practical Guide to Headless WordPress](https://www.youtube.com/watch?v=CUiHnde9BmE) [00:00:00] What is headless? Because it's not some scary October Halloween themed costume idea. Now, let me explain. So, have you ever thought to yourself that I love WordPress for its back end and how easy it is to let your clients manage content? Right? Managing blog posts or pages or in this case team members. Let's check out Chris. Yes, Chris the Chipmunk. The point is this is a very familiar interface. It's very quick and easy to train your clients. So, have you ever thought that you love this, but you don't love WordPress serving up your public front end? Have you ever wanted to keep the WordPress backend, but just let WordPress be 100% out of your way [00:00:44] when it comes to the public front end? Sure, you can create your own theme, and you can even write all of your own HTML, CSS, and JavaScript, but at the end of the day, you'd still be using PHP and WordPress functions and the WordPress way of, you know, architecting your theme files and code. What if you wanted your public front end to instead use a different text stack entirely and be 100% separate from WordPress? What if you wanted to use something like NextJS? For example, here I have a NextJS website that's pulling data from my WordPress backend. So, remember we had, you know, these different pages, but we also had team members. There is Chris the [00:01:27] Chipmunk. I can click on Chris to see the full biography. And it's not just a one-way street of pulling data from WordPress. I can push or send data to WordPress. If I click on contact us and I fill out this form, it will programmatically add it as a new entry in this contacts area where I've captured their email, phone, message. You get the idea. So, back to the question, what is headless? It means you're using WordPress only for the backend and you've essentially removed its head or its public presentation and then you can substitute that with anything you want. In this video, I'm going to walk through this process of creating a NextJS front end that pulls from a WordPress backend. We'll build it [00:02:11] step by step and even deploy it live up onto the public web. And that brings us to the sponsor of today's video, Cloudways, specifically Cloudways Velocity. Velocity lets you host NodeJS applications. Now, in the past, hosting a node app was fairly complex, but Velocity has made it as simple as possible. You just send them your files and you're basically done. Excellent security, excellent speed and performance. You don't pay per app, you pay per server. If you want to check it out and save 30% on your first three bills, you can use the code brad node 26. You'll find a link in the pinned comment and description with that promo code already applied. Huge huge thank [00:02:54] you to Cloudways for sponsoring this educational video. Now, let's get into the action. Let's begin with an ingredient list of what you need to follow along with this video. So, number one, you need a WordPress installation, a copy of WordPress. Okay. Number two, if we want to use NextJS, that means we need to have NodeJS installed on your computer, on your personal computer. So, you can just visit the official website, nodejs.org. All right. Once you have node installed, then we need a place where we can write code or nowadays have AI agents write the code for us. But uh the one that I recommend is VS Code. Long before agentic coding was even a thing, this [00:03:37] was my text editor of choice. It's completely free to download and use. And they even provide a very generous free monthly amount of the AI agentic coding features. So you can pause the video while you install both VS Code and NodeJS. Okay. Once you have those two things installed, I want you to create a folder, a brand new empty folder on your desktop or just somewhere on your computer that you can find again very easily. And then I want you to drag and drop that new empty folder on top of the VS Code program or in the VS Code program, you can use, you know, the file open menu and choose open folder or open directory or open location. And by the way, you do not need to name your folder the exact same name as me. Anyways, [00:04:21] you'll know that you open the folder as a whole in VS Code if you have this left-hand file explorer option or area in VS Code. This is where we can create, you know, files and folders for our project. But before we get to that, I want you to open your command line in VS Code. So on Mac, that's command J on your keyboard. On Windows, it's control J on your keyboard. And you can press it again to, you know, toggle it like open and close it. Down here, you can make sure that you installed the node successfully by saying node and then a space dash dash version. You don't need to have the same version number as me, but as long as you see some sort of version number instead of command not found, then congratulations, you have [00:05:03] node. If you don't see that, try restarting the VS Code program or even try just restarting your computer as a whole. Now what's nice is that VS Code automatically points your command line towards the current folder that you've opened as a project. This means we are just one command away now from having a nextJS project. So I will show you the command to get started or if you want to know how I know what command to run, you just go to the official NextJS website, click get started. In the lefth hand sidebar I look for installation. Aha. And then here on this command, I I click on the npm option. That's what comes bundled with node by default. So you definitely have access to it. And [00:05:47] then this is the command we're going to run except I will replace this my app with just a period. And what that does is it's not going to create a subfolder called my app. The period just tells it to use the current folder that you're already in. I also don't want to use the default options of d- yes. So let me show you what I would do. Back in VS Code, I will say npx create-ext- app and then a space and then just a period or a dot. That's it. Go ahead and type that out with me. You can pause the video, type it out, and then press enter. Okay. It's going to ask you, do you want to use the default settings? I'm going to click no. I want to customize the settings. And by the way, I'm using the arrow keys on my keyboard. [00:06:30] So, just the up and down arrows. I'll click no. Customize settings. Press enter. Do you want to use Typescript? Now, I'm not trying to create a controversy in the comments of this video. TypeScript is amazing. Typescript is excellent, but personally, I'm just not a Typescript kind of guy. So, I'm going to click no. I don't need a llinter, so I'll choose none. Would you like to use React compiler? I'll say no. Would you like to use Tailwind? Absolutely. Yes. The answer is yes. Would you like your code inside a source directory? No, that's okay. Would you like to use the app router? Yes. Absolutely. That's recommended. So yes, would you like to use cache components? It looks like the default option is yes. So I will say yes. Would you like to customize that? No. This one is [00:07:13] important that you say yes. Would you like to include agents a markdown file with guidance for the coding agent? Yes. Absolutely yes. That's going to get you much better results uh with AI agentic coding. So I'll click yes. Do you want to provide anonymous feedback? No. Okay. So that finished. You can see it gave us a bunch of files and we now have a nextjs project. Now to actually view it in our web browser. Just run one more command with me. Come down here and say npm and then a space run and then a space dev. npm rundev. Press enter. And then back in your browser in the address bar type in localhost colon 3000. Press enter to actually visit that. And [00:07:59] congratulations, you have created a NextJS website. Back in VS Code, we just need to create one new file over here in our sidebar. And then we can have our AI agent start to write things for us. But create a new file with me. So I'll just rightclick new file. And it needs to have this exact same name as me. Dot or you know a period, but NV. This file is where you keep uh sensitive values. Uh do not type this in. I'm just showing you a quick example. So, this is where we include our passwords, our API keys, our tokens, sensitive sensitive values that if someone found them out, our security would be out the window. Someone could [00:08:41] hack us or run up a big bill on behalf of us. So, don't ever include sensitive values like passwords or tokens or API keys in any of your other files in your entire project. If the only thing you get out of this video is this, then I did my job. All of your actually truly sensitive values should go in this one file called env. And this is the format. So you have all uppercase the name of the variable, right? And then equal and then whatever your actual value is. We don't need sky color and grass color. Instead, type this in with me. WP URL equals. And obviously your value is going to be different than mine, but just include the address to your [00:09:24] WordPress website or your WordPress installation. So that would begin with, you know, https and then don't have it end with the forward slash. Just have it end in your domain. Go ahead and save this file. So command or controls. And then don't close VS Code as a whole, but just close this one. Eenv file. So this X right about here. From here, we are ready to take our hands off the keyboard and let the AI agent do the job. Now, if you've never used VS Code before, this icon right about here in the top right corner, that is how you toggle like open and close the right-h hand sidebar. And the very first time you're using VS Code, you will not be logged in. So, you will not see access to actually chat with the AI agent. As you open this [00:10:07] area, though, there should be an intuitive way to log into your account. In order to get logged into that VS Code sidebar, you will need a free, completely free github.com account. You don't need to enter a credit card. Don't pay for anything. Don't sign up. Just use the completely free tier. But once you have a free github.com account, it should be fairly intuitive to get signed into that account in VS Code over here. At that point, you then have access to a fairly generous monthly allotment of AI agentic usage. In this area, I'm not even going to use my keyboard and type. I'm going to use my microphone's voice to text feature, and I'm just going to give the AI agent a prompt. Before I [00:10:50] spell out my prompt, I did want to give you a quick rundown of my WordPress setup. Specifically, how I have team members right here. And, you know, if I click on one, let's look at Tom the Turtle. This is not your typical WordPress post editor, right, with blocks and, you know, your headings and your paragraphs. This is a very custom experience where I can put in Tom the Turtle's job title, his favorite color, his favorite food, his biography, you know, his featured image, even his best friend relationship, like which of the other team members are his best friend. So, this is not default WordPress. This is done through a plugin. There's actually two plugins. They're very similar. Down here in the bottom left corner, we see SCF or ACF. Either advanced custom fields or secure custom [00:11:35] fields. I don't want this video to become an hour-ong tutorial on how to use advanced custom fields or secure custom fields. You can use these plugins for free. And what they let you do is create custom post types. So, in the lefth hand sidebar, in addition to just posts and pages, I also have contacts, team members, so on and so forth. And then from team members, I made this up. I said, hey, there should be a field called job title. There should be a field called favorite color. There should be a field called favorite food. There should be a field called best friend, which is a relationship, and you can select other team member posts. So on and so forth. So all of that is set up through either secure custom fields [00:12:18] or advanced custom fields. You just create custom post types and then you create field groups that show up if it's a certain post type. Let me give you an example like for team members. My field groups called team members. I said only show this field group if post type is equal to team member. So then it's not going to show up for posts or pages. It's just for team members. Now, one thing I did want to show you is that for example, like for this team member field group down here uh at the bottom, if I click on group settings, it's very important that this is enabled for show in the rest API. Without this, nextJS will not be able to fetch all of the data that it needs. So, make sure that's [00:13:01] enabled. And then up here at the top, post types. So, not just field groups, but post types. If I click on team members and then scroll down and choose REST API, I'm just going to make sure that this is enabled. Show this custom post type in the REST API. Perfect. Now, I'm not going to show you step by step how to set this up because it's only limited by your imagination. You can create any post type and any field group that you can think of. Uh, but this, for example, is how I set up contacts as well. So, the contact form when you fill it out, I'm going to save each submission as just a custom post type. And I've set them to private so that only WordPress administrators can see them. But that's how I'm capturing someone's email, phone, message. You get [00:13:44] the idea. So, that was a quick tour of my WordPress setup. And I just did that so that you have a frame of reference when I'm talking to the AI agent and giving it my prompt. Obviously, my prompt makes sense for me and my website, but you'll need to adapt your prompt based on, you know, the shape of your data in WordPress. Like, do you have custom post types? Do you have forms that you're trying to work with? Like, keep in mind, uh, your site might be different than mine, but here's the prompt I would set up. Please set up my NextJS site to pull data from WordPress. So I'm using a headless CMS architecture. In my env file, you will find a variable called wp URL with, you know, my WordPress [00:14:29] location. And that should give you everything you need. Now, here's what I want. I want my homepage to just be very simple and minimal and just say, you know, hello, welcome to my website. I want my top navigation to have uh links to about us and our history and team members and news. Period. The about us page should pull the content from the WordPress page called about us. The our history page should pull content from the WordPress page called our history. The team members page should pull content from the custom post type called team members in WordPress. On the team [00:15:13] members page, I want you to show all of the posts from the team members post type and have each one be a nice grid. So, it will have their featured image photo and then on top of their image, like layered on top of their image, have their name and their job title. And obviously when you click one, when you click anywhere on their card, it should take you to a screen for just that one individual team member. Period. The news page should show blog posts. So just list the posts and then when you click on the title, it takes you to a page for just that one individual post. And again, all of this can be powered by the WordPress REST API. With just that base [00:15:59] URL that I gave you in myv file, you should have everything you need. Okay, that's my prompt. I'm going to go ahead and press enter and see what the agent does. So, this is what my agent created. And it looks like everything's working. Now, I'm not going to spend too much time clicking through every detail with you because due to the random nature of AI agents, yours is going to look different than mine. Yours might have completely different problems than the problems I'm running into, but let me just explain what I'm looking for. So, first and foremost, I want to make sure that it's using the NextJS way of linking to other pages. I'm not seeing any problems right away, but here's the prompt I would run. So, I'll go back into the chat and this is the prompt I would run. This looks good. Please make [00:16:42] sure that we are not using a elements for links. Please use the idiomatic way in Nex.js to link which is the link component. You might already be doing this but please just make sure uh you know you can double check that any sort of navigation should be using the next.js link component. The nextjs link component is what allows like when I click on one of these links see how lightning fast it is. It's because it's not even performing a full page reload. but it's using JavaScript to just immediately inject the correct content into the screen. On other projects I've ran, the AI didn't know to do that for [00:17:25] the navigation, but it looks like this time around it got it right on the first try. Okay, the next thing I look for or the next thing we need to fix is within the actual like paragraphs and real content of your posts and pages, you might probably have some sort of links to other external, excuse me, internal pages. So, for example, in this sentence, I have a link to another page, the our history page, but when I click on it, it takes me to my actual WordPress installation. Also, you know, you might have a link to an external website, like here I have a link to Google. So, here's what I would do. I would come up with a prompt that addresses this. Here's what I would say. within the actual paragraphs of content [00:18:08] within a post or a page. If there is a link to another post or page, please do not link to my WordPress website. Keep it on the Nex.js website, but you know, show the appropriate page or post. In order to do this, you'll need to probably check if the domain for the link is the same domain as, you know, the WordPress installation. So, the base WordPress URL that you're pulling from, I will give you a hint. In order to accomplish this, you'll probably want a package called HTML React parser. Obviously, don't use this behavior for external links in a post or a page. Like, if I have a link to google.com, we [00:18:51] should not have this behavior applied. Does that make sense? So, only for links that are within our same website to posts or pages. Okay, that's the prompt I would use. Let's run it and see what the agent can do. My agent finished. So, I'll refresh. Go back to my page. I'll click on the our history link. Beautiful. It just takes me right to that page. But if I go back and click on this link to Google. Beautiful. Next up, I want to make sure that it's using the idiomatic next.js way of imi of handling images. So, like on the about us page, right, I have this image, you know, or on any of my pages, I have inline images in my content, you know, especially on team members. Uh, but if I just rightclick on one of these images and click open a new tab. Aha, look at the [00:19:35] address. It's pulling directly from my WordPress website URL. That's not what we want for performance reasons. So, here's the prompt I would give. This is great. I'm noticing though that images are just using standard HTML, you know, img tags instead of using the idiomatic next.js way of using the Next.js JS image component right and there are performance benefits to be had there. So please if you see any images in pages content or post content or you know like in the team members area when we're showing their image their featured image please use the standard way of using the next.js image component. All right [00:20:19] that's my prompt. I'll go ahead and let the agent work. Looks like my agent finished. So if I refresh and go to this page there's an example image. Now, if I right click on it, choose open image in new tab. Perfect. It might be different depending on the browser you're using, but if you're using Chrome as of today, this is probably what I would expect to see if it's using the Nex.js way of handling images. Perfect. From here, I want to focus on the team members area because currently, if I go into one, let me click on, you know, Tom the Turtle. This isn't bad, but it's not showing his favorite color or his favorite food, and it's also not showing my best friend relationship field. So here's what I would do. Here's the prompt I would give. On the detail screen for a team member, please show their value for the [00:21:02] custom field of favorite color and favorite food. And then also there's a relationship custom field called best friend. Some team members won't have a value for this field. So if that's the case, you don't need to show anything. But if they have a best friend, you know, if there's a value for that field, uh, and it's pointing towards another team member, please have a link. Obviously, use a next.js link, but link towards that team member. You can include their best friend, uh, you know, below their biography text. All right, let's see what the agent can do. All right, so my agent finished. I refreshed the detail screen for Tom. I see some good news and some bad news. So, the good news is the data is there, right? Favorite color, green. Favorite food, [00:21:45] grass. Best friend, Bob. It's a link. If I click on it, it takes me to the Bob detail screen. Favorite color, orange. Favorite food, berries. Best friend, Tom. I can click on it. However, this styling is not looking right. And I noticed that in this playright screen that the agent is using, the styling looks good. So, I don't know what's going on, but let's give it a new prompt. The data and relationships are looking great, but this there's no styling on that new text for favorite color and favorite food and best friend. I'm noticing that I'm seeing styling that you might have intended in this playwright or preview screen, but when I actually view it in the browser, there's nothing there. Like the styling for that new content, it's completely missing. Can you please double check this and [00:22:27] just make sure that we are showing favorite color and favorite food and best friend in a pleasant way. So, the agent finished. Now, I really like what I'm seeing here in the VS Code preview. I mean, that looks amazing. However, back in the browser, even if I hard refresh, it still looks like this. So, what I would maybe try is to just maybe go into my terminal, press control C to stop that dev task, and I'd probably just manually try npm run build, and then run npm rundev again. Back in the browser now, if I refresh or hard refresh, that did not fix anything. All right, it's time to give the AI a piece of my mind. Nope, that did not fix anything. I like your new design. Your new design looks amazing and I can see [00:23:12] it in the VS Code preview window that you have open, but when I actually view the site in the browser, I can't see anything. I tried running an npm run build and then restarting npm rundev, but I I'm just not seeing this new styling or really any styling on the favorite color, favorite food, and best friend area. Again, I don't know what's going on, but what you have in the preview area in VS Code looks really great. Why is it not showing up on the actual Nex.js site? Please look into this and fix it. That did the trick. You just got to be direct and firm and polite with the AI and it fixed it. So now my detail screen for a team member looks great. We've got a two column layout. Favorite color, favorite food, [00:23:55] best friend. I can click on that. Goes to Bob. Beautiful. I am noticing though down in the bottom left corner, I'm getting like a Nex.js JS performance error or just you know coding guide error. NextJS encountered URL data outside of suspense. This may prevent the navigation from being in instant leading to a slower user experience. So I mean you can probably already guess what I'm going to do. Going to copy that into my clipboard. That looks great. I can see it on the actual website. Now when I click on a individual team member though I'm seeing a Nex.js warning in the bottom left corner. I'm going to copy and paste that message for you. Can you please address this and fix it? I'll just quotes paste it in. Close out the quotes. Also, please be aware I closed [00:24:38] down your preview that was running on port 3001. And so, just please be aware of that. All right, let's see what it can do. The agent finished. And now when I refresh the detail screen, that warning is gone. Beautiful. Earlier, I noticed a similar warning. If I go to the news area and click on an individual blog post. Yep. So, let's click on that. Let's see what's going on. Looks like the same error message, but I'll just copy that again. Perfect. That fixed it. But I'm noticing uh a similar problem when you view an individual blog post. Here is the message. Just quotes. I'll paste it in. Please fix this. Perfect. So now when I refresh uh an individual news post. Looking good. I can go back, click on a different one. Beautiful. At this [00:25:21] point, I want to focus on the contact us page that we need to set up. Now again I don't want this to turn into an hourong lesson on advanced custom fields or secure custom fields but back in WordPress in the back end I have already created a custom post type called contacts and a field group where it has fields like you know email phone message you get the idea but assuming you've set that up now here's how I would add that to my NexJS front end before I write the prompt I actually want you to go in VS Code into env file. And here's why. Currently, our Nex.js project only has readonly or like guest level access to WordPress, right? [00:26:07] Because we didn't provide a password or anything like that. So, it's not like we have admin level access to WordPress. This is just publicly available REST API data that anyone in the world can visit, right? However, if we're going to start creating contact posts and submitting and adding data into WordPress, we need it like it it needs to be able to trust us. It's not going to let us in without some sort of password. So inv add another variable and let's say WP username all uppercase for now just set it to ABC equals ABC and then also say WP application password equals ABC. Now let me show you [00:26:52] what you're going to put here. The username would just be you know you probably have something more secure than just admin but you know your WordPress admin username. Now, application password. Let me show you how you set that up. In your WordPress dashboard, click onto users in the lefth hand sidebar and then click on your admin user. If you scroll all the way down on that screen, you'll see application passwords and you can just give it a label. You don't have to type in gibberish like me, but the label doesn't matter. Just you, you know, you could call it Nex.js frontend and then click add application password. That's going to generate an application password. It's only going to show it to you this one time. So, be sure to copy it into your clipboard. And then, you guessed it, back in VS Code, that's what you [00:27:36] paste here instead of ABC for WP application password. Essentially, this is going to let you log in or have permission as if you were the admin. But the application password can be easily revoked, right? So, that way you're not having to like reveal your actual password or change your actual password, so on and so forth. But make sure your application password is here and then you can save this file and close it. Perfect. Now, here's the prompt I would give. Please add a new page in the top navigation called contact us. This new page should have a form that visitors can fill out and they enter their name, their email, their phone number, and a message. those values or those fields map to custom fields for the contacts [00:28:24] post type in WordPress. So I want you to take their values and in a secure fashion create a new contact post of the contacts post type and make sure that its status is set to private. We want this to be a private post so that only WordPress administrators can view it uh because it contains sensitive information like their phone number and email. So, just make the post private. And then before I press enter and finish that prompt, I want to add one more fun detail. Go back into your env file and let's add another variable and let's call it secret equals. I'm going to give it a top secret value of meows a lot. You could call it barks a lot or you know, just name it anything you want. [00:29:06] I'm going to show you how we can add a little bit of custom logic or validation to our form. But go ahead and save and close your file. Let me finish out my prompt. Finally, on the back end of our NextJS site, so using a server function, you need to check the following. Have another field below their message and ask the user, what is the name of the cat that meows frequently. You'll find the secret answer to this question in our env file with a variable called secret. Make sure that what the user types in is is case insensitive. So whatever logic you need to do like converting things to uppercase or [00:29:47] lowercase but the capitalization doesn't matter but make sure that they get that answer correct. If they don't get that answer correct don't even send their information to WordPress but if they get it correct you know go ahead and create that new private contacts post in WordPress. I should say you have everything you need to do this because inv I also added wp application password and wp username. So using the rest api you have everything you need to do this. All right that's my prompt. Let's go ahead and see what the agent can do. Looks like my agent finished. Perfect. There's a new contact us page when I click on it. Let me fill this out. Now at first I'm going to get this question wrong and see what happens. Let me get [00:30:30] it wrong on purpose. That answer wasn't correct. Please try again. Okay, but this time I'll get it correct. I'm going to click send message. We couldn't send your message right now. Please try again later. H I'm going to take that message and write a new prompt. That did not work. I filled out the form correctly and I used the secret value which seems to be working. Like when I got it wrong on purpose, it didn't even try. But when I got this when I put the correct secret in, it tried to send it. But then it gave me this error message. Please fix this. All right, the agent finished and promised that it will work this time. Let me click send message. Hm, interesting. WordPress rejected the site's application password. Check WP username and WP application password. [00:31:14] All right, I was the problem. The AI was doing everything right. I was the problem. I had uh the wrong application password somehow. So, I submitted that. If I go into contacts on in my WordPress dashboard, there it is. the brand new entry that just got submitted from my form. It was successfully set to private. It's secured their email, their phone. You get the idea. Just a couple more details and then I want to push this project live up onto the web. So, number one, let's improve the design just a little bit and then number two, I'll do a quick security check. Looking great. Now, in terms of the site design, just in the very top header and footer, can you add a little bit of pizzazz or color or just a little bit of like [00:31:57] graphic design and make it look nice? My agent told me that it added some styling and added some pill styling to my buttons, but I don't see any changes. I can't see any of your newest styling changes. I tried starting and stopping the dev server. I tried manually running npm run build. Can you double check what's going on here? I can't see those newest header and footer design changes that I requested that you made. I'm liking what I'm seeing. I like the hover styles for the navigation. I like the footer. I am noticing though that below an image, there's no spacing or margin below like a content image. That looks great. Now, in the content for a post or page, I'm noticing that [00:32:41] below an image, there's no spacing. You know, imagine there's like an image and then below that there's a paragraph. There should be some sort of vert vertical margin or spacing below the image before the next piece of content. It's that easy. Boom. Uh let's go back to the homepage. I think it would be nice if this text maybe like slightly animated in on the homepage. Make it so that the large hero text has a graceful and subtle animation. So, you know, it sort of like drops into place or fades into place when you first load that page. Let's test it out. So, I'm on the team member screen. If I click this to go back to the homepage. Nice. I like that. Let's see it again. Good enough for me. All right. I'm just going to [00:33:24] give one more prompt and then I'm ready to push this live up onto the web. How is caching working for our Next.js site. Please make sure that we're using, you know, fairly standard idiomatic Next.js way of handling things. Let me explain. So I want my website to have great performance and so like if someone views a blog post or a team member, there's no sense in fetch and then someone else 2 seconds later fetches that same you know page. There's no sense in us requesting that data from WordPress again and again and again. So by default I'm not sure if like um maybe 5 minutes but you know we only need to refresh that data so often [00:34:07] otherwise we should just serve up the cached copy of the data so it's lightning fast you know what I mean finally on a separate issue on the contact us page please just do a double check a security audit uh you know make sure that we're not opening ourselves up to any obvious security holes. All right, that's my prompt. Let's run it. Please double and triple check that none of our sensitive values from ourv file are being exposed on the front end. The client side or frontend side should not reveal any of our values. All of that should take place within the secure backend Nex.js server functions. At this point, I'm ready to go live. But first, [00:34:51] I wanted to give you a 30 to 40 second explanation on why I like Nex.js JS uh and the way that it handles caching so much. So, check this out. Especially in combination with WordPress and making edits. So, when I go to team members, the very first time I click on like Tom the Turtle, well, it actually didn't display there. I was trying to show you a brief moment where it says loading content. Maybe if I click on one of these blog posts. No, unfortunately, they're all already cached. But if I click on one and manually refresh, see how it says loading article. And now when I refresh, it's instant. So once that cache is established, it's not a per user or per browser cache. It's cached on the Nex.js server side. So then this is Chrome. But even if I open [00:35:34] up like Firefox, you know, now when I click on one of these team members, this data that was fetched from WordPress, you know, from my original request, it is cached on our Nex.js server side. So for the next 5 minutes, it is instant to all visitors. Now, what if someone who's a non-technical user, you know, makes a change, uh, you know, one of our content contributors makes a change to a piece of content. What's nice is we don't need to rebuild or redeploy anything. We don't need to trigger a redeploy or a rebuild. Nex.js, you know, the longest we'll have to wait is 5 minutes at the absolute maximum. And then it will pull in the next time someone visits this, [00:36:17] like it will pull in the newest copies and with the newest changes. I like this workflow. I think this works really well for content that can change pretty frequently, but you still have excellent caching performance. One last note before we push this live. I did want to talk about the WordPress side of things like uh you know this admin dashboard side of things. You might have been wondering how on this contact screen I changed which columns are being shown. Like by default, it would not show you these custom field columns like email or phone or message. Also, I locked things down so that the only block types you have access to. Let me go into a page really quick. So, my admin users or my editors, the only blocks they can add [00:37:01] are paragraphs, images, and headings, and I believe bolded lists. All the other block types and patterns I've removed access to. To do that, you would just build a theme in WordPress. And here is my GitHub link so you can take a look at the example code I used. Uh, but that's a different video for another day on how to set up your WordPress theme. Essentially, you just have a different project. You could start up a new VS Code project and you could have your Aentic AI help you write these features. My point is though is obviously a separate code base is responsible. And also I have it set up so that the if you try to visit the actual website, it just says this is intentionally empty. This is a headless experience. The point is [00:37:44] this is a separate codebase that controls WordPress itself. In today's video, we're just focusing on the Nex.js public frontend side of things. All right, cool. At this point, let's go live. Let's push this live up to the web because currently localhost 3000, I am the only person in the world that can view this. Now, when it comes to pushing or deploying this live up onto the public web, that brings us to today's sponsor, Cloudways, specifically Cloudways Velocity. Cloudways Velocity makes it really easy to host your NodeJS applications, and that's what I'm going to use right now. I really like how with Velocity, you don't pay per app, you pay per server. So, here is a server I already have in my Cloudways Velocity [00:38:28] dashboard, and I can just choose add another application to the server. It's going to ask me okay which GitHub or you know which project of code do you want to pull from. So before we can do that we need to talk about how in the world do we take these code files that we've created or that our AI agent has created. But how do we take these and send them to GitHub so that we can host them somewhere? If you're already familiar with Git and GitHub, you can skip the next, you know, minute or two. Uh, but if you've never worked with this before, you're going to need Git installed on your computer. So, you can visit this website, git-scm.com. Really quick, let me show you how you can check to see if you have git or not. In VS Code, if you open up your command [00:39:11] line, remember that's command J or control J, and press control C. That's Windows and Mac. Control C to stop the current task. So, we're stopping our next JS dev server. And if you just say get not ET git- version, if you see any sort of version number instead of command not found, congratulations, you have git. Otherwise, you'll need to get git installed on your computer. Cool. But once you have git, you will need to run this command in the quotes. You know, this might be whatever your name is, but go ahead and press enter on that. And then you're also going to need to say this command get config- askglobal user.e and then in [00:39:58] quotes your actual email address. Cool. Now that you've done those two things, you are ready to push your project up to GitHub. Now this is why it's so important that your sensitive values like your passwords and your tokens only live in yourv file. Now uh nextJS created this file for us. But anytime you have a sensitive file, you need to have a.get ignore file in your.git ignore uh and again Nex.js has already done this for us, but it is ignoring ourv file. What this means is that when we push our source code up to GitHub, we're not accidentally leaking any of our sensitive values. Even if all of your repos on GitHub are private, you [00:40:41] still never ever ever want to include yourv file. Let me show you what you do. So if you used the agentic coding over on the right hand side that means you have a github.com account from github.com while you're logged in you want to create a new repository. So either somewhere in the top or you know the menu bar anywhere just get to this new repo screen and let's give it a name. How about WordPress nextjs front end? And I'll make this repository private. I don't want anyone to be able to see it. But even though that's the case, I'm still not going to send over myenv file. And then just go ahead and click create repository. Okay. From this screen, I'm looking for one thing and one thing only. Aha. This line of code that says get remote add origin. Just [00:41:26] copy that line of code into your clipboard. And then back in VS Code in your terminal, Nex.js already established that this is a git repository. If it didn't, you would have to say get init, but we don't need to do that. I'm just going to say get add-up a to add all changes to the staging area. And then I'll say get commit first set of changes. Okay, so that locked in the changes on my personal laptop. But now I want to push that up to GitHub. So you just paste in that command that GitHub gave me. That alone didn't do anything. However, now when I say get push origin main, it knows what origin means. origin means my GitHub repo on the GitHub server. So when I push enter, [00:42:10] it's done. And when I go back to this tab and refresh, beautiful. There are all of my NextJS files. Now, you may have guessed it back in the Cloudways tab where I'm trying to create a new application on my server. Now, it's as simple as just finding that repository. Uh now, you will need to connect your GitHub account for the very first time. So in the same browser where you're logged into GitHub, uh it should be as easy as just clicking on this and then clicking, you know, I accept, I give permission. You're giving Cloudways permission to access your GitHub account. But from there, then I'm going to search. I think I named it something along the lines of WordPress next. Yeah, this one WordPress next.js front end. You just click on that, click continue. And this is cool. Cloudways can [00:42:54] recognize just by the files that this is a NextJS project. And not only a Next.js JS project. It can tell the difference between a server side rendering or a client side rendering. So awesome. Just by default, I like this a lot. I don't need to change any of these default. Well, I do need to make one change. All of the default options are great, but I do need to supply my environment variables. So, let me show you how that works. We'll click add. And this is where you just add in, you know, all uppercase sky color. And then you don't need the equal sign, but it equals blue. And then you can click add another one. All uppercase grass color. What would it equal? Green. So you get the idea. Manually move over all of your environment variables back in VS Code. [00:43:37] Remember our sensitive.Env file. Just go in there and move those over and then click save. Okay. So I added my four environment variables. All the other default options are great. So I'm going to click deploy. Now deploy. Deploy. The very first time you're setting up a brand new node app, it can take an extra minute or two longer. For future deployments to the same project that already exists, they are much faster. All right, it looks like it finished. Let's click go to application listing. Click on the new one. We can always use this link right here to view it in the browser. Cool. Here it is. Let's test it out. So if I click on about us, looks good. Our history, team members. Let me click on a specific team member. [00:44:19] Beautiful. If I go to news, everything's looking really great. Let's test the contact form. Moment of truth. Let's click send message. Okay. And then to check, if I go back into the WordPress dashboard, beautiful. There it is from the live site. I did want to show off how cool the caching feature is. So, let's use the about us page for example. Anyone in the world that views this page now for the next few minutes, they don't have to wait for Nex.js to fetch the data from WordPress. Nex.js JS has its own cached copy of this in memory. So, it's just as fast as humanly possible or I guess I should say as fast as machine possible. Uh, but now check this out. Imagine one of our [00:45:01] content contributors makes a change to this. So, in the dashboard, if I go into the about us page and maybe I just add a brand new paragraph and say, "Testing, testing. This is wonderful." And I click save and then you refresh on the front end. You're not going to see that instantly. That's okay. You're never going to have to wait more than 5 minutes at the total maximum for it to show up. Oh, there you go. It's already there. I got a little bit lucky there in terms of the 5m minute caching intervals. But what's nice is we don't need to trigger a deploy or a rebuild after every content update. So, you can just let all of your content contributors just continue to use WordPress as they normally would. And [00:45:44] our Nex.js site is smart enough to handle, you know, all of the fetching and caching for us. Perfect. Also notice how that first time when I clicked onto a detail screen, the image for the animal took like a split second to load. That is also cached. So in the background is Chrome. This is Firefox. And if I click on team members and then you know Tom the Turtle, notice how it didn't take a split second to load the image. It's instantly there. So even the images get cached. I'm really happy with how this turned out. And again, the reason I like this architecture so much is because now, you know, your WordPress might be hosted anywhere. Maybe it's on a really good premium host, but even if it's on a bargain bin basement hosting [00:46:27] and it's slow, as long as it doesn't crash entirely, if it's slow, that's okay because Nex.js is caching the data and only needing it every 5 minutes. So, your public front end is lightning fast. It's also fun because you're not dependent on WordPress for limiting you on the front end. Anything you can cook up in your imagination. And then we saw how easy it is to use Agentic AI to just have it do what you tell it to do. I think this is a fun architecture to work with. Hopefully you learned something in this video. And again, I want to give a huge shout out to Cloudways, specifically Cloudways Velocity and their NodeJS hosting for making this educational video possible. Excellent speed, excellent security. You don't pay per app, you pay per server. You saw how [00:47:11] easy it was for me to add an additional app to the velocity server I already had. Huge shout out and thank you to Cloudways. And thank you to you for watching until the very end. Hopefully this video was helpful. Hopefully you feel like you learned something. Stay tuned for more web development tutorials and I'll see you, Practical Guide to Headless WordPress, LearnWebCode, 01m4rb8s9xn3jr2t2qcbj4xt67.