Use Wordpress as a Headless CMS for Next JS

Рет қаралды 37,463

2 жыл бұрын

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

Пікірлер: 64

@alexanderm6187 2 жыл бұрын

The good one tutorial, short but informative :) keep going!

@abidibnazam4462 8 ай бұрын

This is exactly what I needed, great video man!!!

@tomasborek9018 2 жыл бұрын

That was great, straight to the point tutorial!

@thedigitalceo 2 жыл бұрын

Awesome glad you liked it!

@markwasfy9230 2 жыл бұрын

bro you are amazing keep it up omar :)

@alivakili2770 Жыл бұрын

Great tutorial 👌

@snillochemingson2830 Жыл бұрын

Greatest tutorial ever🐐

@48_subhambanerjee22 9 ай бұрын

Thanks a lot my bro ❤❤❤

@the_knowledgewap 8 ай бұрын

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

@tuffilaro1565 Жыл бұрын

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.

@thedigitalceo Жыл бұрын

Thanks! What do you mean by inserting. This tutorial is about using data from Wordpress as headless data. Do you mean posting into Wordpress?

@bjrnextcoder 6 ай бұрын

@@thedigitalceoyes

@lugas4270 4 ай бұрын

How to remove the original wordpress homepage and use your frontend as the main homepage then?

@him99ful Жыл бұрын

Image not populating.. any idea how we can

@user-gj5lv1dz6z 29 күн бұрын

thanks a lot for this awesome clean and quick tutorial... do you have something for graphql?

@user-gj5lv1dz6z 25 күн бұрын

do you have tutorial of getting wordpress menu?

@TheInternalNet 5 ай бұрын

Can this be setup with any PHP application? Like OpenEMR?

@shariquenadim3144 Ай бұрын

Will the WordPress headless cms slow?

@phyrax1380 2 жыл бұрын

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?

@thedigitalceo 2 жыл бұрын

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

@phyrax1380 2 жыл бұрын

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

@thedigitalceo 2 жыл бұрын

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

@anonimosbrain Ай бұрын

who else was paying attention to the mechanical key caps sound instead of the tutorial

@passivedividendsoptions 10 ай бұрын

Nice! Any more recent videos on this topic?

@elmcapp6032 Жыл бұрын

I'm new but should we use the api directory and create an endpoint to use in the getServerSideProps?

@thedigitalceo Жыл бұрын

You don’t necessarily need an endpoint in the api directory if you use getServerSideProps. You can pull direct from any external endpoint there

@Mark-nm9sm Ай бұрын

Yeah but how do we do pagination on the data instead of fetchjing every single on of them ?!?!?!?!?

@beingperfect9856 2 жыл бұрын

Very nice

@thedigitalceo 2 жыл бұрын

Thank you

@badassshorts4757 2 жыл бұрын

Awesome man!!

@nahaing 2 ай бұрын

Can you do a complete playlist on this topic from start to finish and make a complete project. It'll help me a lot.

@Foused87 5 ай бұрын

How about internalization?

@ronniemao5768 10 ай бұрын

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

@mohasinkr 3 ай бұрын

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

@mehedihasanridoy1086 11 ай бұрын

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

@SameerKhan-gu2gc 10 ай бұрын

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

@mehedihasanridoy1086 10 ай бұрын

@@SameerKhan-gu2gc sure..

@the_knowledgewap 8 ай бұрын

i want only use admin panel and wp json not their frontend

@elmcapp6032 Жыл бұрын

love videos but the keyboard is too loud

@How2Forex 2 жыл бұрын

But how to host it? Cuz i had issue with cors and could fix it at all even after deep investigating

@thedigitalceo 2 жыл бұрын

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.

@wchorski Жыл бұрын

What are your current thoughts of using Wordpress as a headless CMS today? As apposed to something like Strapi?

@thedigitalceo Жыл бұрын

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

@awenn2015 2 жыл бұрын

the issue of disabling the frontend with such use has not been disclosed

@thedigitalceo 2 жыл бұрын

I believe with Wordpress there’s a plugin that would enable that feature on the json Api endpoint

@awenn2015 2 жыл бұрын

@@thedigitalceo I didn't understand what the endpoints api has to do with it

@Daleon1 Жыл бұрын

Is this the same for WooCommerce...?

@thedigitalceo Жыл бұрын

It the woocommerce plug-in provides json endpoints it could be but I’m not familiar with the woocommerce plug-in

@arman3400 10 ай бұрын

Did you figure this out? I'm in the same situation, looking for a woocommerce integration with a nextjs/react frontend

@Daleon1 9 ай бұрын

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

@JuaN4ALL-zw5yw 17 күн бұрын

WooCommerce can make REST API endpoints so I think it is possible

@dssombol6048 2 жыл бұрын

Why not show rest thumbnail?

@thedigitalceo 2 жыл бұрын

Sure you can show any data from the rest Api! I was just keeping it short for the tutorial.

@mattmcmahon8311 4 ай бұрын

Thank you bro an actually good video that doesn't have ridiculous accent or adverts

@Hellmiauz 2 ай бұрын

Why though.

@viniciusmarques2212 2 жыл бұрын

U jumped some parts on tutorial, but's ok

@thedigitalceo 2 жыл бұрын

I just wanted to skip some of the things like the full wordpress setup and such.

@rndrx70 Жыл бұрын

Until CORS and images ruin your day

@thedigitalceo Жыл бұрын

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