How to Use WordPress as a Headless CMS

Рет қаралды 36,600

Күн бұрын

In this video I demonstrate how to build a product website with blog and a contact form, using WordPress as a Headless CMS. We will use the Advanced Custom Fields (ACF) plugin to create a cusotm post type (content type) in WordPress with custom fields. We will then retrieve the data with the WordPress RESTful API to display it in a Next.js Web Application. I will also show you how to integrate the native WordPress Posts and Pages types with Next.js and utilize the Contact Form 7 Plugin, together with Flamingo to build a form, integrate it with out Next.js web application and implement validation for it.
Next.js Course:
• Introduction to Next.j...
Contents:
0:00 Introduction
0:10 Introducing the Next.js App
8:05 Introduction to WordPress
9:35 Custom Content/Post Type
26:00 WordPress RESTful API
29:55 Integration with Next.JS
42:15 Headless Contact Forms
1:00:50 Headless Pages
1:06:38 Headless Posts
1:10:05 Generating Static Pages
1:12:14 Conclusion
Social Media:
Email: nikola.n.lazarov@outlook.com
Twitter: / nikelaz
LinkedIn: / nikola-lazarov
#headless #cms #wp #nextjs

Пікірлер: 73

@Riot-Mafia-UP32 3 сағат бұрын

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.

@irlWIKKO 3 ай бұрын

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 10 ай бұрын

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

@nltech1 10 ай бұрын

Thanks! I’m glad you found it helpful!

@-lumqua-827 10 ай бұрын

Awesome lad, I appreciate your work 🎉

@nltech1 10 ай бұрын

Thank you!

@huythanh3648 Ай бұрын

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

@chillydoog 6 ай бұрын

Automatic credibility based on your Technics shirt. Respect ✊

@nltech1 6 ай бұрын

Love the brand! Thank you!

@jaiminviramgama320 23 күн бұрын

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

@visualmodo 10 ай бұрын

Very good video content!

@nltech1 10 ай бұрын

Thanks!

@illiakorj4390 9 ай бұрын

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

@nltech1 9 ай бұрын

Thank you. I hope you find it insightful.

@ivaylopetrov9956 6 ай бұрын

Найс 👍

@betopiccoli1538 8 ай бұрын

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!

@markusmitk2161 7 ай бұрын

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

@MaksymZak 13 күн бұрын

Cool tutor!

@nltech1 6 күн бұрын

Thanks!

@chip_a 4 ай бұрын

great

@brancode404 10 ай бұрын

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

@nltech1 10 ай бұрын

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 5 ай бұрын

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 3 ай бұрын

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

@alexandermediantsev6354 3 ай бұрын

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?

@iVigilxnte 10 ай бұрын

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 10 ай бұрын

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 10 ай бұрын

@@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 10 ай бұрын

@@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 9 ай бұрын

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

@nltech1 9 ай бұрын

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.

@blastkage7190 3 ай бұрын

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

@maurolobo3450 6 ай бұрын

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 6 ай бұрын

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.

@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.

@Fabio.T.outroconteudos-ul3pd 25 күн бұрын

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

@Tony.Nguyen137 3 ай бұрын

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?

@igorkovacevic2792 6 ай бұрын

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

@nltech1 6 ай бұрын

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

@user-kl6fw2jo7i Ай бұрын

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

@Stealo- 15 күн бұрын

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 ! :)

@athardavid 5 ай бұрын

❤

@rossanobr 10 ай бұрын

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

@nltech1 9 ай бұрын

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

@mariners_platter 8 ай бұрын

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 7 ай бұрын

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.

@user-rw1vs8dq6k 5 ай бұрын

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 5 ай бұрын

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.

@navidbehroozi5793 7 ай бұрын

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 5 ай бұрын

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.

@chakricherala 26 күн бұрын

Can I have the github link for this project?

@Micsc 7 ай бұрын

What do you think about PODS plugin instead of ACF?

@nltech1 7 ай бұрын

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 7 ай бұрын

@@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.

@quebuena111 8 ай бұрын

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

@nltech1 8 ай бұрын

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

@worldwide2315 2 ай бұрын

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

@yagelProject 7 ай бұрын

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

@bassemel-kahki9141 2 ай бұрын

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

@kimberlyjacobsen4148 9 ай бұрын

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)

@Micsc 7 ай бұрын

#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 7 ай бұрын

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 7 ай бұрын

@@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.