Wordpress Headless CMS, GraphQL, and Nextjs - Let's Build a Blog
Вставка
- Опубліковано 26 тра 2021
- 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.com/james
Wordpress + Nextjs Starter - github.com/colbyfayock/next-w...
Colby Fayock UA-cam (Community Shoutout) - / @colbyfayock
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquick.com
_____________________________________________
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.jamesqquick.com/courses/r...
Learn everything you need to know about Visual Studio Code - www.udemy.com/learn-visual-st...
Build a Quiz App - www.udemy.com/build-a-quiz-ap...
Make sure to use the exclusive 90% off coupon code JAMES for Wordpress hosting! www.hostinger.com/james
Any idea how I can deploy the nextjs app into vercel with the same domain + having the wp api deployed in wordpress?
thanks for the shoutout! 🙌 great stuff
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
Another great content!
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?
Congrats on 100k, well deserved.
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!
Great! Thanks for the heads up
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
I've done this in GatsbyJS, I may use nextjs for my next client project.
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.
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 ?
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.
thank you for the video. any followup on this video? like, can we create new post using next.js?
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
use vercel
Why would you suggest hostinger for this if it doesn't support next js?
Great video. I see the preview of posts as a problem with this aproach.
Can this be built locally using xampp?
Nice video. I use Strapi when I want to do something fast and scalable like this.
Strapi is pretty awesome as well!
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.
Very good WordPress video!
Thank you!
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?
Next.js can do it both ways. It can do static pages and/or server-side rendered pages. That's why I love it!
@@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.
Can u please explain me next js wordpress starter from beginning. I am struggling from 1week
How do you plan to disable the default WP publishing? Or how would you deploy that setup in the real world?
Not sure what you mean specifically?
@@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?
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.
@@JamesQQuick I would also love to know answears to those questions.. !
@@JamesQQuick Hey! any chance you will give us some more info on those questions? would love to get somethink from this tutorial.
Cool logo!
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!
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...?
@@gabrielmoraes4516 afaik you deploy Next.js to Vercel or Netlify and setup the same domain name, that's it.
Hey James Great one can you elaborate how would you deploy the nextJS app on the Domain? cheers
Maybe I should do a deployment video!
@@JamesQQuick Yep yep yep :) thank you
@@JamesQQuick Yep Yep Deployment video please please :) Good stuff thank you!
What if I have 300 to 500 posts does netlify or vercel will be slow?
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!
Can you make video deplouying it on hostinger as well?
can i deploy it on vercel
Can we please have your VSCode settings file
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... ;-) !!
Super :)
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
Hey man great content. Do you have a video on how you setup your VS to look like that?
You can find all my settings on my uses page - www.jamesqquick.com/uses/
Great video! Is it possible to trigger a new build when publishing something on WordPress? Thx!
yeah you can use hooks if you are deploying on vercel or you can use ISR feature of next js
hey man, what is the font used in your vscode in this video?
Cascadia Code. It's FREE!! :)
Is it still working in 2022?
Great content ❤️❤️, which theme you are using today??
CodeSTACKr theme in this one I believe
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
I guess I was expecting to see the Next.js stuff get hosted as well 🤔adding that env var to Vercel and what not.
Great feedback! Thanks for watching.
Can you make video step by step how to mask domain on facebook by vercel or heroku, or cloudfare?
What icon theme re you using?
.
Vs code icons :)
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
Expected to see Next.js fontend instead of wordpress on hosted web... But I'm newbie..
Video is good, but you didn't tell me how to disable frontend in wordpress,
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.
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.
This just looks like normal wordpress with extra steps.
If Wordpress works for you great. This gives you full control over the frontend with the technologies you already know or want to use.
@@JamesQQuick If I don't know Next.js but I'm familiar with React.js, would that be a good option?
You are recommending hostinger, is this a joke ?
Worked well for me. Have you used it before?
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.
Great feedback thanks!
I don’t know. I simply refuse to run anything that is based on PHP. Just triggers PTSD from the Web 1.0 ages
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
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.
It is a tutorial thats the basics to help people on a bigger project
Is that your kid?
Nephew :)
Sadly this repo is hell complicated
It does a lot of really good stuff. Any particular parts you find particularly confusing?
Made it 2/3 way through, then a long tik tok ad made me go away. bye bye
Hi, what email can I send you a business offer?
Video is good, but you didn't tell me how to disable frontend in wordpress,