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
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.
Exactly what I was looking for, thank you! Great video.
Thanks! I’m glad you found it helpful!
Awesome lad, I appreciate your work 🎉
Thank you!
Automatic credibility based on your Technics shirt. Respect ✊
Love the brand! Thank you!
Very good video content!
Thanks!
Nice vid. Which theme and color scheme do you use for the vsc editor?
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!
I saved this video to my YT-playlist. Thanx a lot from Heroic Ukraine!
Thank you. I hope you find it insightful.
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?
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.
@@nltech1 got it. Thank you so much! Crazy how I was about to search this up on youtube and it showed up my feed
@@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?
Nice content bro. Can you make woocommerce with next js for ecommerce production ready website?
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.
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
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.
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?
great
Найс 👍
Nice video! It would be great if you shared the git starter files so its possible to follow along from there.
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.
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?
In the form data add: _wpcf7_unit_tag = the id form the form
Nice video. How did you install wordpress in the project?
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
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
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
Hi! Are you planning on making more content on this topic? Authentication and similar ?
Yes, I am working on a couple of headless WP videos.
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?
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.
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.
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?
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.
What do you think about PODS plugin instead of ACF?
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.
@@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.
Is this a custom next.js template or one of the boilerplates they have?
It’s a custom template I made quickly just for the demo.
@@nltech1 Can I get the code for this template?
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?
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.
❤
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)
#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?
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.
@@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.
Can you please tell me how to make a 404 page correctly? The usual variant of not-found.tsx does not work.
This is very old protocol. The actual usual variant is just 404.tsx or .jsx
rest api? Who still manually publishes products in the CMS backend now
bro why you didnt use woocommerce plugin in this tutorial?
Hi! I plan to make a separate video about that. That would have been too much content for one video.
Nothing can be seen on such a big monitor