No video :(

Wordpress Headless CMS, GraphQL, and Nextjs - Let's Build a Blog

Подписаться 203 тыс.

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

50% 1

Wordpress, GraphQL, and Next.js....oh my!! Did you know you can use Wordpress as a Headless CMS for your Jamstack applications? Wordpress often gets a bad reputation in modern Web Development, but it still plays a major role in the Web ecosystem. With the WPGraphQL plugin, you can use your Wordpress instance as a Headless CMS and access your data in Next.js using GraphQL.
Host Wordpress with Hostinger.
EXCLUSIVE COUPON (90% off) - www.hostinger....
Wordpress + Nextjs Starter - github.com/col...
Colby Fayock RU-vid (Community Shoutout) - / @colbyfayock
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquic...
_____________________________________________
Connect with me 😀
Live streams on Twitch - / jamesqquick
Follow me on Twitter - / jamesqquick
Join the 💬 Discord Server 💬 - / discord
_____________________________________________
COURSES 💻
Learn how to build Fullstack apps with React and Serverless Functions - www.jamesqquic...
Learn everything you need to know about Visual Studio Code - www.udemy.com/...
Build a Quiz App - www.udemy.com/...

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

26 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@JamesQQuick 3 года назад

Make sure to use the exclusive 90% off coupon code JAMES for Wordpress hosting! www.hostinger.com/james

@trollgg777 2 года назад

Any idea how I can deploy the nextjs app into vercel with the same domain + having the wp api deployed in wordpress?

@colbyfayock 3 года назад

thanks for the shoutout! 🙌 great stuff

@salymakhmedov2196 3 года назад

I've done this in GatsbyJS, I may use nextjs for my next client project.

@rayc3103 2 года назад

Next is better for SEO, as it renders server side. You may want to look into that. Very good for marketing agency clients and e-commerce sites.

@DreamCreateCommunicate Год назад

Great video! I've been researching frameworks for my next project - and this is looking like it suites my needs. QUESTION: I'm a bit unclear as to where everything lives when you go into production. In the final version, where does all your Next.js code live? How is it ultimately deployed? Hope you don't mind answering that : ) Thanks again!

@gabrielmoraes4516 Год назад

Same question here! I built a similar project with Hygraph, but I'm wondering where does nextjs code lives and how do you connect it to your domain, since it seems that wordpress is already using the domain...?

@beyourahi Год назад

@@gabrielmoraes4516 afaik you deploy Next.js to Vercel or Netlify and setup the same domain name, that's it.

@Geomaverick124 3 года назад

Think you could build out a website using this template? Keep up the good work! I love React and have been trying out Nextjs and have been loving it.

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

There might be repositories or resources compatible with Next.js 14, and you can indeed modify the frontend using Next.js and have those changes reflected in WordPress. However, for bidirectional changes (modifying the frontend through code), it might require setting up proper communication between Next.js and WordPress to achieve this seamlessly

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

Great video. I see the preview of posts as a problem with this aproach.

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

If you are running dev server, you wont have to restart the server again when publishing posts on wordpress. Just need to refresh the page on browser

@kant859600 3 года назад

Nice video. I use Strapi when I want to do something fast and scalable like this.

@JamesQQuick 3 года назад

Strapi is pretty awesome as well!

@ankit.chaurasia 2 года назад

Hey bro! I have a problem in strapi. I have a simple Model. Foods and Shops selling that food. The relation is many to many. Like say, Pizza is selling to 5 shops. When querying that (like fetching from api) strapi shows all data of those shops including reviews, title etc etc. How can i limit those data to only shop names.

@vahesevachyan9399 3 года назад

Congrats on 100k, well deserved.

@CodeWithTomi 3 года назад

Another great content!

@DrSarge37 Год назад

I guess I was expecting to see the Next.js stuff get hosted as well 🤔adding that env var to Vercel and what not.

@JamesQQuick Год назад

Great feedback! Thanks for watching.

@djlee0721 3 года назад

Cool logo!

@janik6n 3 года назад

How do you plan to disable the default WP publishing? Or how would you deploy that setup in the real world?

@JamesQQuick 3 года назад

Not sure what you mean specifically?

@janik6n 3 года назад

@@JamesQQuick When you set up the WP installation, and publish content, it will be public on a domain you specified, right? Now, you pull the same content through the GraphQL API, and publish it elsewhere through the Next app? Am I missing something obvious, or why the double publishing, _or_ are you able to disable the default WP site?

@piotrzakrzewski5643 3 года назад

I would also love to know that! I come from standard PHP based front of WP and I quickly have a lot of questions. LIKE: 1. How do you force new pages publish / changes form editors perspective in WP 2. Can we do search via GQL? if so how is the performance (as far as i understand we have one more step in it (js search -> GQL -> PHP -> database) 3. Shouldn’t we use some ready made theme from WP perspective.. because now the dashboard thinks we operate on 2121 theme.. 4. Does hosting like Hostinger even support deploying NEXT.js 5. Do we really get any advantage from performance perspective compared to PHP based theme (build from scratch, dedicated to given project). I understand we get static site serving from Next but we basically get the same with Litespeed and LS Cashe (which Hostinger supports as far as i know) … I would probably have 20 more questions but that’s probably not the place.

@deliquent2703 3 года назад

@@JamesQQuick I would also love to know answears to those questions.. !

@piotrzakrzewski5643 3 года назад

@@JamesQQuick Hey! any chance you will give us some more info on those questions? would love to get somethink from this tutorial.

@NinjaTeamWP 3 года назад

Great! Thanks for the heads up

@aseel1024 3 года назад

that's awesome! wordpress is hard to add simple feature, u need either to add big plugin or build a plugin from scratch I don't know why devs still like wordpress, it's slow, has bad documentation.

@mrx89vienna Год назад

Please stop your bashing.... It sounds like you are a junior Developer and you don't have much experience and knowledge on WP. WordPress is one of the best documented projects on the web... and why do you think it's slow? it can be slow (on a cheap server and 100 plugins installed) - but a fresh and installation on a good server with php8.3 is not slow. WordPress can be the right tool for your project, but it can also be the worst decision... stop thinking in boxes.

@simbolmina 2 года назад

I don't understand what do that serve for? My live wordpress site is still same. Is this just for fetch posts to my local machine? I simply want to know if I i can deploy what I have on my localmachine using wp

@visualmodo 3 года назад

Very good WordPress video!

@JamesQQuick 3 года назад

Thank you!

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

thank you for the video. any followup on this video? like, can we create new post using next.js?

@Allformyequine 3 года назад

This is totally awesome and I luv Next.js but so not trying to steer this elsewhere but can you do the same thing with SvelteKit and Wordpress? I would Luv luv luv a video on that... ;-) !!

@stewtech 3 месяца назад

Can this be built locally using xampp?

@osherezra8460 3 года назад

Hey James Great one can you elaborate how would you deploy the nextJS app on the Domain? cheers

@JamesQQuick 3 года назад

Maybe I should do a deployment video!

@osherezra8460 3 года назад

@@JamesQQuick Yep yep yep :) thank you

@Allformyequine 3 года назад

@@JamesQQuick Yep Yep Deployment video please please :) Good stuff thank you!

@pjf7044 Год назад

So essentially you are creating a Wordpress site in itself entirely but also having it double as a content source to fetch from? Is there anyway to only query the content from WP without having the content published ?

@asapsvicide9742 Год назад

Would you host the frontend on vercel? If so how would you go about using the same domain you used on hostinger on vercel? Thanks!

@twinprimes8353 Год назад

Why would you suggest hostinger for this if it doesn't support next js?

@juanmanuelsolis9705 2 года назад

James if we have a team of 3 coders, and want to manage a Wordpress Headless CMS and work on the same Wordpress having version control, which solution better fits to us?

@homendutta Год назад

can i deploy it on vercel

@siisanda_giiven Год назад

Hey man great content. Do you have a video on how you setup your VS to look like that?

@JamesQQuick Год назад

You can find all my settings on my uses page - www.jamesqquick.com/uses/

@HimanshuYT 3 года назад

What if I have 300 to 500 posts does netlify or vercel will be slow?

@JamesQQuick 3 года назад

There are different things you can do. One is incremental static generation. It only does a certain amount at build time and generates the rest of the pages as needed. That helps!

@gabriel-mk7jk Год назад

Hi, I've been looking into this to make blog, currently I am running a development server online making the Apollo requests. How long does it take for changes to propagate? I have noticed I can only see my WordPress updates once clearing cache, is there a way to enforce this update more instantly? Thank you

@moniruzzamansaikat4751 3 года назад

Great content ❤️❤️, which theme you are using today??

@JamesQQuick 3 года назад

CodeSTACKr theme in this one I believe

@gangamanijayaram3997 Год назад

Can u please explain me next js wordpress starter from beginning. I am struggling from 1week

@johanberglund6733 2 года назад

Can you make video deplouying it on hostinger as well?

@chaunguyen231 Год назад

Can you make video step by step how to mask domain on facebook by vercel or heroku, or cloudfare?

@stephenselvaraj8960 2 года назад

Super :)

@awenn2015 2 года назад

Video is good, but you didn't tell me how to disable frontend in wordpress,

@chasingkairos9982 3 года назад

What icon theme re you using?

@sahilahmed3066 3 года назад

@JamesQQuick 3 года назад

Vs code icons :)

@alexandresibre9979 Год назад

Great video! Is it possible to trigger a new build when publishing something on WordPress? Thx!

@SarthakKaushikwebdeveloper Год назад

yeah you can use hooks if you are deploying on vercel or you can use ISR feature of next js

@yogaaryasa2684 Год назад

Is it still working in 2022?

@jeffreynwankwo7912 2 года назад

Please, how do you deploy it. What happens if you add a custom domain to your deployed nextjs app which is the same domain used for the WordPress backend. When you visit the site, won't it load WordPress default theme? Please am confused

@emo7122 2 года назад

use vercel

@vishnudarshan4762 3 года назад

Can we please have your VSCode settings file

@yomajo 2 года назад

Expected to see Next.js fontend instead of wordpress on hosted web... But I'm newbie..

@cau8777 2 года назад

You are recommending hostinger, is this a joke ?

@JamesQQuick 2 года назад

Worked well for me. Have you used it before?

@sarath9077 3 года назад

This way of page generation is very similar to that of Gatsby (SSG), right? Can't NextJs pull data from WP live? Like without building the site? Is it possible with NextJs?

@JamesQQuick 3 года назад

Next.js can do it both ways. It can do static pages and/or server-side rendered pages. That's why I love it!

@Thpoirier 2 года назад

@@JamesQQuick You can even configure paths in order to ask Next to add the new posts / paths to cache - it will use SSR the first time and then static.

@edulguedes 2 года назад

hey man, what is the font used in your vscode in this video?

@JamesQQuick 2 года назад

Cascadia Code. It's FREE!! :)

@skyhigheagleer6 2 года назад

This is a bit of a lame duck video. Massive amounts of time covering your hosting sponsor and using a repo which has the interesting challenges to solve already solved.

@JamesQQuick 2 года назад

Great feedback thanks!

@sbrugby1 3 года назад

This just looks like normal wordpress with extra steps.

@JamesQQuick 3 года назад

If Wordpress works for you great. This gives you full control over the frontend with the technologies you already know or want to use.

@Adam-nw1vy Год назад

@@JamesQQuick If I don't know Next.js but I'm familiar with React.js, would that be a good option?

@pjf7044 Год назад

Is it possible to use Wordpress as the front end main site and build the Content on nextJS? That way maybe you can build a custom blog post app in JS without having to deal with PHP or write a Wordpress plug-in? Just an idea

@dinoscheidt 3 года назад

I don’t know. I simply refuse to run anything that is based on PHP. Just triggers PTSD from the Web 1.0 ages

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

Made it 2/3 way through, then a long tik tok ad made me go away. bye bye

@alfieqashwa5257 3 года назад

Is that your kid?

@JamesQQuick 3 года назад

Nephew :)

@alexlytle089 2 года назад

This is the most ridiculous over complicated way to set up a simple blog. Let's use some flashy technologies just for the hell of it

@nicholasSewing 2 года назад

Part of me agrees with you, but part of me also recognizes that projects can quickly change in scope and having the tools to expand a project quickly is super important.