Use Wordpress as a Headless CMS for Next JS
HTML-код
- Опубликовано: 4 фев 2025
- Front end web development frameworks like NextJS and Gatsby which are frameworks for the React Javascript library are taking over because they make React server side rendering so easy. They also add a ton of other efficient features and optimizations.
while Wordpress is on its way out as the primary website development platform it was in the past, it still has a big place in the web ecosystem. With react we still need a headless CMS to store our data. In this video I show you how easy it is to use free Wordpress as the administrative dashboard to host your data/headless CMS that your NextJS web application can pull from.
CONNECT ON MY DISCORD:
/ discord
Twitter: / omarel
#nextjs #reactjs #headlesscms
That was great, straight to the point tutorial!
Awesome glad you liked it!
The good one tutorial, short but informative :) keep going!
Described Problem -> described solution -> showed solution. Straight to the point!
One thing I'm just wondering is, does inserting data work in the same way? Like for a newsletter sign-up for example.
Thanks! What do you mean by inserting. This tutorial is about using data from Wordpress as headless data. Do you mean posting into Wordpress?
@@thedigitalceoyes
This is exactly what I needed, great video man!!!
Thanks , explained in short
Greatest tutorial ever🐐
Thank you bro an actually good video that doesn't have ridiculous accent or adverts
Can you do a complete playlist on this topic from start to finish and make a complete project. It'll help me a lot.
bro you are amazing keep it up omar :)
Nice! Any more recent videos on this topic?
Great tutorial 👌
Thanks a lot my bro ❤❤❤
hi, but wordpress site is also opening. how i block frontend in wordpress. same post url create on wordpress and also on react/next js
Very, very late and hope you found your answer! But for future dev's, add a redirect script to the correct site in WordPress' index.php file
How to remove the original wordpress homepage and use your frontend as the main homepage then?
How about internalization?
Can this be setup with any PHP application? Like OpenEMR?
Yeah but how do we do pagination on the data instead of fetchjing every single on of them ?!?!?!?!?
First 2 mins it looks understandable, and thing suddenly changed, what the hel is json data? and why does it jump to next js interface so fast, I couldn't catch up what is that
Will the WordPress headless cms slow?
How you finally host this website where it doesn't serve the wordpress default site? You have to think about seo point of view..if both of the sites visible then it occurs seo issues
I have a solution for you if you are interested let me know i will send you wordpress as a headless and front end as a next js with SEO on the same domain with same url
@@SameerKhan-gu2gc sure..
love videos but the keyboard is too loud
All you did was render the title tag, what about the other post content? How would I render that rich text content on my next js app
Hey i was wondering, if i buy a basic shared web hosting service am i able to install the headless wordpress in a subdomain(as an API as you show on your video) and have my nextjs project in the root domain at the same time? or do i have to pay for a different hosting service?
If you have a server where you can run NextJS in root and create sites then yes absolutely. I know you can do that with say an Ubuntu server from digital ocean. I have a video on that But I’ve never personally setup NextJS on a “shared” hosting server but if you can and create multiple subdomains on the same plan I’m sure you can then
@@thedigitalceo first of all thanks for the reply.Helps me a lot . I’m currently going to build a page for a friend-client which includes a blog so I need a way of CMS for him to write blog posts. What other alternatives do you suggest in terms of hosting that ecosystem ? Maybe Wordpress on a web server and netlify free plan for nextjs? The only thing I’m “afraid” of from this approach Is the possible risk for reaching any free plan limits on netlify. Are the free plan limits easily reachable ?The blog is for a person who’s audience is approximately at 50k followers . Also I think paying 2 subscriptions (netlify and web server ) would be quite expensive wouldn’t it ? Thanks in advance :)
@@phyrax1380 This is a good question. There are 2 main ways. But before getting to it. I would start by saying a few points: my experience I would just avoid any free and hobby plans for a client. Secondly in terms of cost for hosting this should be up front: Hosting sites costs a monthly fee and that needs to be clear to clients - even a friend client. So either express the costs and the. put the hosting cost right on the clients credit card or pay for it and charge them an additional fee for hosting. With that out of the way. You can host the front end on vercel and then use a headless cms pay per use like contently or put Wordpress on any other server and use that. There’s also a nice headless cms I use called getcockpit which can be put on any server that supports php. The second way is to host both NextJS and your backend on one server like Ubuntu on Digital Ocean. That way you can put front and backend on one server. I have a video on how to deploy NextJS on Ubuntu. It doesn’t cover setting up Wordpress on the same server though but it would be the same as how to install Wordpress on Ubuntu. I’m sure there are many videos on that.
I'm new but should we use the api directory and create an endpoint to use in the getServerSideProps?
You don’t necessarily need an endpoint in the api directory if you use getServerSideProps. You can pull direct from any external endpoint there
i want only use admin panel and wp json not their frontend
How to deploy this?
Image not populating.. any idea how we can
Is this the same for WooCommerce...?
It the woocommerce plug-in provides json endpoints it could be but I’m not familiar with the woocommerce plug-in
Did you figure this out? I'm in the same situation, looking for a woocommerce integration with a nextjs/react frontend
@@arman3400 If I am not mistaken I did get it to work but the person I did it for didn't like the complexity/ amount more money they had to dish out.
WooCommerce can make REST API endpoints so I think it is possible
Until CORS and images ruin your day
It should be fine. In this example it’s public json Wordpress spits out. And the images you add directly in the Wordpress backend and the urls show in the json
What are your current thoughts of using Wordpress as a headless CMS today? As apposed to something like Strapi?
I think they both work fine. Whatever works. I like strapi and try to do away with Wordpress but it’s important to mention strapi is more complicated to deploy than setting up Wordpress on almost any host. So I would try both and see which you like
the issue of disabling the frontend with such use has not been disclosed
I believe with Wordpress there’s a plugin that would enable that feature on the json Api endpoint
@@thedigitalceo I didn't understand what the endpoints api has to do with it
who else was paying attention to the mechanical key caps sound instead of the tutorial
Very nice
Thank you
Awesome man!!
Why not show rest thumbnail?
Sure you can show any data from the rest Api! I was just keeping it short for the tutorial.
But how to host it? Cuz i had issue with cors and could fix it at all even after deep investigating
What was the cors issue? I’ve been able to make Api requests from external domains. However I suppose you can also create a sub domain from the main domain. Put the Wordpress on any server and point it to the subdomain. This way the requests come from the same domain.
Why though.
U jumped some parts on tutorial, but's ok
I just wanted to skip some of the things like the full wordpress setup and such.
Not a brilliant idea having your heavy keyboard keys mic'd up.
dude the mic is horrible!
Awesome man!! Btw where can i contact you ?
Hey there. Here is ok. What’s up?