How to Use WordPress as a Headless CMS

[@irlWIKKO]

I originally came here to have an hour of tutorial to casually follow but throughout this video there are so many valuable details, that it really pays off to take your time and listen. Big up to you for that.

[@Mark-sc2ew]

Exactly what I was looking for, thank you! Great video.

[@nltech1]

Thanks! I’m glad you found it helpful!

[@chillydoog]

Automatic credibility based on your Technics shirt. Respect ✊

[@nltech1]

Love the brand! Thank you!

[@Riot-Mafia-UP32]

I've spend the whole day studying your code. It's was super helpful. Easy to implement. It took time for me because I really liked your style of writing code and I wanted to learn as much as I could from it. I am working on a project and your tutorial helped me to achieve what I had to to. Thanks a lot! I am a new subscriber. Keep posting cool stuff.

[@ВасяВетров-ж6ц2ю]

Great tutorial - exactly what I was seeking for! Thanks honey

[@-lumqua-827]

Awesome lad, I appreciate your work 🎉

[@nltech1]

Thank you!

[@illiakorj4390]

I saved this video to my YT-playlist. Thanx a lot from Heroic Ukraine!

[@nltech1]

Thank you. I hope you find it insightful.

[@brancode404]

Nice content bro. Can you make woocommerce with next js for ecommerce production ready website?

[@nltech1]

Thank you. I have some plans to make videos about ecommerce, but I am not sure if I will use WooCommerce. That, however, will happen in a few months, because I already have planned the next few videos and there are quite a few topics I want to cover.

[@kamilwieliczko1590]

I am getting { "code": "wpcf7_unit_tag_not_found", "message": "There is no valid unit tag.", "data": { "status": 400 } } after sending a POST req what could be the problem?

[@Devniel54]

In the form data add: _wpcf7_unit_tag = the id form the form

[@victoromondi7101]

@@Devniel54 Thank you so much. I got so stuck that I decided to move to the next tutorial. Then I saw this, and everything worked fine.

[@Devniel54]

@@victoromondi7101 you are welcome 🙏🏼

[@jaiminviramgama320]

Can you please make a video about how to do user signup in the headless wordpress with next.js

[@mohamedmostafa2622]

is there any for woocommerce ? includes, cart functions, checkout, user auth etc?

[@pa2429-b4w]

great tutorial. how do we deploy/host it though?

[@huythanh3648]

Video is so on point and just what I need, thank you so much

[@visualmodo]

Very good video content!

[@nltech1]

Thanks!

[@igorkovacevic2792]

Hi! Are you planning on making more content on this topic? Authentication and similar ?

[@nltech1]

Yes, I am working on a couple of headless WP videos.

[@biohanso]

Hi! Do you have repo for next.js app boilerplate for run your tutorial? I know Next.js but I would like to quickly test it with Wordpress without wasting time on building a static demo of next.js to use the tutorial.

[@betopiccoli1538]

Hey! Great video! Tks for sharing! Do you know if it is possible to get the "field_type" of the ACF field? Not type itself (string, number, boolean), but if it is a "Text", "Text Area", "Image"....? Tks!

[@blastkage7190]

everything is great I learned a lot from this video but still I have one big problem, your next app was running on localhost and your theme runs on localhost/wordpress is there no way to actually run the next app instead of the theme? because i want to run this next app with my domain on my actually published website with wordpress cms

[@iVigilxnte]

Thank you for the video! For custom pages like the about page you created, what is better for performance and SEO, having it rendered server-side or SSG? And when using generateStaticParams for the products, would it be best to use revalidate with the fetch function to get fresh data in case of any edits to the products?

[@nltech1]

Thank you! SSG is generally always preferred if possible, but that depends on the nature of the data and the update intervals. You could set the revalidate option in next to update the cached data, but the static site will only be generated when building the application, so the revalidate option would not be very useful. Ideally you could have a webhook setup, so that when you publish changes to a WordPress item, you trigger a re-build of your Next.js application in your remote repository, for example in GitHub with GitHub Actions.

[@iVigilxnte]

@@nltech1 got it. Thank you so much! Crazy how I was about to search this up on youtube and it showed up my feed

[@iVigilxnte]

@@nltech1 hey sorry got another question. Lets say i am making changes to my about page and I would like to see a a live preview of those changes on the about page before I confirm them and possibly send a re-build of my next.js application. Is there anything out there that offers this or how to build it out?

[@MAlejandraRojasMaldonado]

Nice video! It would be great if you shared the git starter files so its possible to follow along from there.

[@nltech1]

Thank you for the tip. I will make sure to do that for future videos. Unfortunately I can’t share the source code for this project as I don’t have it anymore.

[@Tony.Nguyen137]

But when I use Wordpress as a headless cms and host it later, must I somehow deactivate the Wordpress pst urls? Else they can be accessed?

[@maurolobo3450]

Hey there, great video! Really useful! Is there a way to deploy this on a shared host or is it necessary to use a VPS? For instance, with Hostinger

[@nltech1]

You can deploy this on a shared hosting. The Wordpress instance can of course run on the hosting as it’s a php app and you can build the Next.js application to a static site and essentially deploy it alongside the Wordpress instance. You can also build a deployment action in GitHub which you can trigger after you change the content in the CMS, so that the static site can be re-built.

[@alexandermediantsev6354]

Thanks for your video. I have figured out many issues. There is only one question left. Do I understand correctly that as a result we will get a completely static website? And when you add a new product, it will no longer be on the uploaded site? In order for it to appear, will you have to build it again?

[@ieeeuniversityofpiraeusstu6936]

I get 404 not found on the api urls... everything is enabled

[@Noritoshi-r8m]

Wow I tough we could do it only with GraphQL, very cool! Is it possible to do Post, Put and Delete requests to a Wordpress related MySQL database like this?

[@alvierime]

Did you manage to figure out authentication?. When users want to interact on a post, they have to be authenticated

[@Stealo-]

Hello I study WordPress with next js, can I have github repositorie I would try to make a website page builder with WordPress backend and next js thanks you ! :)

[@Micsc]

What do you think about PODS plugin instead of ACF?

[@nltech1]

I have used it for a project and it works great. You can probably find some pros and cons of each, but the fact is that I have found both plugins to support everything I need for 99% of the projects I do, which just require multiple content types with a few simple fields.

[@Micsc]

@@nltech1 I found that ACF doesn't have a multiple input for images in the free version and PODS it does. Thanks for the video, i was looking for that recently.

[@MaksymZak]

Cool tutor!

[@nltech1]

Thanks!

[@yagelProject]

Can you please tell me how to make a 404 page correctly? The usual variant of not-found.tsx does not work.

[@bassemel-kahki9141]

This is very old protocol. The actual usual variant is just 404.tsx or .jsx

[@phoolchandprajapat-l5l]

I have issue when i hit the request from postman showing ""message": "There was an error trying to send your message. Please try again later.", but when i submit the form form website this is working fine. Please help me

[@Micsc]

#question2 Is to possible to prepare a rest api with nested object? Like e.g. i want to build hompege - and i want to split the whole page into e.g. hero, about, testimonials, but i want to make with nested object like: homepage_data: { hero: { cta-btn: { type: 'something' } } about: { cta-btn: { type: 'something else'} } } Is it possible?

[@nltech1]

If you want this kind of customization in your API responses, I would just use GraphQL. You can enable a plugin like WPGraphQL (there are a number of plugins that enable this functionality). Then you will be able to retrieve whatever data you want, in any format with a single post request. Otherwise, to answer your question for the REST API, yes you can create a custom endpoint (developer.wordpress.org/rest-api/extending-the-rest-api/adding-custom-endpoints/) which can return anything. But you will need to implement it.

[@Micsc]

@@nltech1 thanks. Now the main problem at this point is to use my custom block name to fetch the data. Like e.g. I want to build the homepage (wordpress) and then fetch the data in the frontend app (React). I have no idea how to name the particular block (e.g. header, about, testimonials) from the page.

[@quebuena111]

Is this a custom next.js template or one of the boilerplates they have?

[@nltech1]

It’s a custom template I made quickly just for the demo.

[@worldwide2315]

@@nltech1 Can I get the code for this template?

[@markusmitk2161]

Nice vid. Which theme and color scheme do you use for the vsc editor?

[@StevenOrtiz-g5r]

Hello, I'm new to this and I liked the video so I finished it and everything turned out well. How do I upload it to the internet, can someone guide me or mention the steps and what should I do to make it a secure website, thank you?

[@nltech1]

Hi, you essentially need to deploy two applications - a wordpress instance which you can deploy on any shared hosting and a Nextjs app that offers a couple of build and deployment options. What I would do is deploy the WP app to a shared hosting and then build the Nextjs frontend as a static site and deploy it to the same shared hosting with an FTP deploy GitHub action. I might make a video on that topic soon.

[@Mark-nm9sm]

Anyone knows how I can limit the ammount of posts i fetch? I dont want to always fetch all existing posts, i want to enable some kind of pagination

[@emmanuelasomba6937]

why not use the javascript slice method? you may want to read up on it

[@rossanobr]

Nice video. How did you install wordpress in the project?

[@nltech1]

I had a wordpress install on a local apache + php server instance. This is for development so I just used whatever I had available for convenience. One of the easiest methods to get wordpress up and running for development is the official docker container: hub.docker.com/_/wordpress

[@chakricherala]

Can I have the github link for this project?

[@mariners_platter]

do you explain in this video your folder structure for this project? Is your Next app inside your WP themes folder? It would be great if you could post a link to a github repo for people wanting to study your code.

[@nltech1]

I explain the structure of the next app. The Next application is not in the WP themes folder. You will need to deploy and run the Next.js application separately, as it has different environment requirements - it's a Node.js application (you can build it into a static site as well, to deploy it on a shared hosting, but you will still need to handle deployment separately). This is a whole idea behind using a Headless CMS - to not couple your CMS and the client-side website. Otherwise, you are right - I do provide a repository in my newer videos. It was a mistake to not include the code of the project here, unfortunately I don't have it anymore and I can't share it at this point.

[@navidbehroozi5793]

Hi thanks for this useful content ❤ Is that possible to have a field with ACF that integrates with Elementor? Imagine I have a Product model with title, thumbnail etc... and we wanna have a field called content which is actually user html design. Is that possible?

[@nltech1]

I am not sure as I have never attempted that. It sound like a strange idea though, as you the whole point of the headless setup is to control the markup separately. If you want to build the layout with elementor you can just use the classic CMS mode with a theme.

[@BoosBoos-z7s]

it seems we can not use ACF on wordpress anymore,

[@nltech1]

Can you be more specific? What happened to ACF? I used it for a project two weeks ago.

[@nugrohoadnan2771]

I think it changed the name into Secure Custom Field, as i see active users and reviews had same amount with this video

[@Fabio.T.outroconteudos-ul3pd]

Would be good to have Next.js + Ghost cms.

[@dimitriy8689]

super video

[@arthurshelby7656]

bro why you didnt use woocommerce plugin in this tutorial?

[@nltech1]

Hi! I plan to make a separate video about that. That would have been too much content for one video.

[@kimberlyjacobsen4148]

Rename Unique String Mark String press CTRL+D, this will highlight all matching Text in the document (Note this will do a string match so only works where the string i Unique, and where the name is not a part of other words)

[@xyh6552]

rest api? Who still manually publishes products in the CMS backend now

[@squarerootof2]

So slug in Dutch is pronounced something like " swerk"

[@HeRaUSA]

Nothing can be seen on such a big monitor

[@chip_a]

great

[@ivaylopetrov9956]

Найс 👍

[@athardavid]

❤