How to Use WordPress as a Headless CMS

Подписаться 3,1 тыс.

Просмотров 36 тыс.

50% 1

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

Наука

Опубликовано:

25 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 72

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

@huythanh3648 Месяц назад

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

@-lumqua-827 10 месяцев назад

Awesome lad, I appreciate your work 🎉

@nltech1 10 месяцев назад

Thank you!

@chillydoog 6 месяцев назад

Automatic credibility based on your Technics shirt. Respect ✊

@nltech1 6 месяцев назад

Love the brand! Thank you!

@visualmodo 10 месяцев назад

Very good video content!

@nltech1 10 месяцев назад

Thanks!

@MaksymZak 10 дней назад

Cool tutor!

@nltech1 3 дня назад

Thanks!

@betopiccoli1538 7 месяцев назад

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!

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

@markusmitk2161 7 месяцев назад

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

@ivaylopetrov9956 6 месяцев назад

Найс 👍

@chip_a 4 месяца назад

great

@jaiminviramgama320 19 дней назад

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

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

@brancode404 10 месяцев назад

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

@nltech1 9 месяцев назад

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.

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

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

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

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

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

@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

@mariners_platter 7 месяцев назад

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.

@navidbehroozi5793 6 месяцев назад

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.

@athardavid 5 месяцев назад

❤

@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- 11 дней назад

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

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

@Fabio.T.outroconteudos-ul3pd 22 дня назад

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

@rossanobr 9 месяцев назад

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

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

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

@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

@chakricherala 22 дня назад

Can I have the github link for this project?

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

@quebuena111 8 месяцев назад

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

@nltech1 7 месяцев назад

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

@worldwide2315 2 месяца назад

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

@kimberlyjacobsen4148 8 месяцев назад

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)