Hey Colby, do you have a video on how setup the draft posts? Since they will need the authentication to be previewed? Would love to watch a video from you on this topic as you explain these things so well.
Kind of. Netlify and vercel both offer solutions to avoiding this. Netlify and dpr build the pages first request then store it for the rest of that builds lifecycle. Nextjs and ISR basically do cache invalidation where you configure how often you want it to refresh
Hi! do you also have any templates that offer latest version (nextjs + wordpress cms)? I tried to use yours on github(it seems that it's src paths). and because it's our of date, i can't deploy it on vercel. if you have any templates that offers latest, I am willing to purchase!
Hello Colby! Thank you so much, this is exactly what I was missing! Do you have a video or maybe you plan to release a video on how to upload a headless WordPress + Next onto a VPS server?
yes!! ACF works great with WPGraphQL. here's my video walking through it :) ua-cam.com/video/mMaw1LMClwQ/v-deo.html and Yoast SEO if interested ua-cam.com/video/fb8Twa02aww/v-deo.html
hey don't have a video yet, but i have an article you can check out on egghead.io! egghead.io/blog/build-cms-for-ecommerce-store-with-nextjs-and-sanity i'll add it to my list though
aws lightsail isn't free, but they allow you to add plugins. your best option may be creating a WordPress instance locally and playing with it there, could try using localwp.com/ - but that won't be available on the internet
** Does the WordPress portion need to be on a 'live' server for the Netlify part? I did my WordPress part on localwp ...? Seems as long as the server is running it might work; no luck so far tho...
it only needs to be available when Netlify is actively deploying but Netlify needs to have access to it through the internet, so if it's only available locally on your computer, it may not be able to access it
hey! thats a pretty common scenario for using wordpress headlessly. as far as a formula goes, are you asking for recommendations for providers to host on?
@@TaderSalahEddine For WordPress: WP Engine is great for premium projects (a little pricier, but good service) I've had luck with AWS Lightsail in the past, but it's a little more hands-on to configure a few things There are a lot of others you could use For Front End: I really like Netlify, it's who I generally use Vercel who makes Next.js is also fantastic It's a little more limited who can deploy Next.js apps but there might be a few more
So I'm assuming that you just use a different domain name for the WordPress portion (can you give an example) then and for the Next.js frontend side then you connect your 'real domain name' and do all of the SEO and Accessibility things on the Next side... is this correct? ** Also on the WordPress site would you just check the box for 'discourage search engines' box then too?? THANK YOU!! :)
yes! exactly. typically yeah, you would check that box, but if you're using plugins like Yoast SEO, it actually disables some settings because it think its not supposed to include the SEO tags 😅
@@amystout8696 yeahhh it's a bit confusing, i'll break it down So with WordPress we get a front end by default. there's a plugin called Yoast SEO that give you the ability to manage SEO tags like title and description and more when using WordPress headlessly (like we are in this video), we request our data from WordPress and bypass that default front end, this includes Yoast SEO data. the issue is that front end still works if you don't intentionally disable it, meaning, if you have wp.mydomain.com and mydomain.com that uses it, both websites would have a visible front end now WordPress has a feature to prevent robots from crawling it that you can turn on. it's a good way to have both sites, but the one just wont get indexed by google. it adds a noindex tag i believe. the issue however is when using Yoast SEO, yoast uses that flag to determine what to return when requesting data from WordPress, so if you want to receive all of your data, you can't check that flag, but then that creates an issue with your WordPress front end being available to crawl another way of handling the WordPress side is to create a theme that is empty, basically just turning off the front end, then you wouldn't worry about checking that flag and get all of your data hope that helps
You can use the Custom Post Type UI plugin! there should be an option when creating to "show in graphql" and as long as that's selected, it will be available to query. realizing i dont have a video for that one, adding to my list
Awesome! started it seamlessly! However I do I have a question not seen in the documentation If I want to deploy this to shared hosting site like wordpress or on my home server how would I go about that? would I need to change package.json and remove the "next export". If you have another video about deploying this It would really help thanks!
hey good question! so when you run `yarn build` it will export static HTML, CSS, and JS files into the `out` directory, so really, you should be able to server that from any type of web server. now you can serve the project from a _node_ server, and the way you would do that is optionally remove the `next export` like you were saying, but when the server starts up, after build, you would run `yarn start`, which would run `next start` and make the project available at the specified port. there's definitely more details in the all of the above. the easiest way imo is to put the static `out` output somewhere that can serve those files 🤷♂️ common places to deploy Next.js lately are Vercel (who makes Next.js) and Netlify, which lets the deployment kind of "just work"
there are definitely a few ways to do that! I wouldnt be surprised if an image gallery plugin would render in the HTML to use you could also use ACF gallery www.advancedcustomfields.com/resources/gallery/ here's an ACF tutorial but doesnt show gallery ua-cam.com/video/mMaw1LMClwQ/v-deo.html
So i have watched you another workdpress video, and their you have mentions about the web hook trick , so does that web hook thing works on hostinger, or it only works on netlify or vercel?
oh looks like you found the video :) heres the webhook with netlify ua-cam.com/video/_KXV75LLAm0/v-deo.html - any wordpress host should work if you can install thte plugin but the deployment platform would need the ability to trigger a deploy with a url
@@colbyfayock no problem, one more thing i wanted to know that, you are using netlify as nexyjs hosting, so is the starter pack of netlify good for blog websites having around 6 to 8 thousand daily user ?
Hi Cobly, I encounter this error when i tried to yarn dev. Error: The module '/Users/...../node_modules/canvas/build/Release/canvas.node' was compiled against a different Node.js version using NODE_MODULE_VERSION 93. This version of Node.js requires NODE_MODULE_VERSION 83. Please try re-compiling or re-installing the module (for instance, using `npm rebuild` or `npm install`). What can i do ? Thnks in advance
all the above! :) the starter has basic page support but using WPGraphQL and data fetching we can really do whatever we want my site spacejelly.dev/ has custom post types, custom fields, it uses Yoast SEO plugin, and a few other custom things. i started the project from my Next.js WordPress Starter source: github.com/colbyfayock/spacejelly.dev
@@colbyfayock thanks I appreciate the quick response. I’ll give it a try this week. I’ve used sanity in the past, but also wanted to give wordpress a chance
@@colbyfayock thanks for the quick reply, Ill try to figure it out. Same for woocommerce, I need to find out how that works. Thanks and keep up the good work
How much content do I need on the Wordpress site for the starter to work? I just went with a default WP starter but keep getting an error in the terminal: GraphQL Request must include at least one of those two parameters: "query" or "queryId" ?
Ahh, sorry - I guess I missed something using the FakerPress plugin, not sure how I messed up? 😆 But I created a bit more fake content and everything is now up and running. This is really a great starter for someone new to Next.js - coming from Gatsby I guess there is a bit for me to learn!
@@LarsEjaas thanks Lars :) I'm curious why it wasn't working though before you ran Faker, I would have expected it to work with the default content WordPress comes with out of the box 🤔 but glad you got it working!
@@colbyfayock Not sure really. It seems like something here isn't working without any data to fetch with the graphQL API? I have run into something similar in Gatsby - but I didn't really debug too much - sorry!
@@colbyfayock I fixed it! It was a goof on my end at first using the wrong endpoint url, then there was an issue with the use of hooks that disappeared with with a fresh install, its working perfectly now, thanks!
Hey Colby, I created a Nextjs Hdlss WP Instance but having crazy slow down times on the Wordpress Admin Dashboard. I have a few Custom Post Types+Pages+Posts using Graphql and faustjs for schema generation. Images are using the Nextjs image tag to be called on the frontend. Perhaps it sthe dangerously set html call? HAve you run into these types of issues?
Hey Ethan. The website or WordPress admin is slow? I haven't used Faust but the website won't impact the WordPress instance beyond making calls to the API whenever it does. I doubt dangerouslyset is the culprit if it's the website that's slow. The only thing I've run into is slowness on development due to the nature of the API requests having to be made before each page loads
Hi Colby, thanks for the great information! I hope you can help me with 2 questions: 1. Is there a way to add ssl certificate for the Lightsail instance while its still a static ip (with no domain attached)? 2. Is there a way to prevent others from reaching the WP endpoints so only my app can display the content? Thanks :)
hey Daniel, good question, I'm not really sure about #1. As far as #2, I know you can do advanced networking within AWS, but I'm not sure if you can do that while attached through Lightsail. I think technically lightsail creates EC2 instances so you may be able to figure something out there. this is kind of beyond my current know-how though haha so can't really direct you too much further, hope that helps though
@@colbyfayock Thanks Colby! Yeah, it's pretty tricky to find solutions for those anecdotes lol. But yet, in 12 minutes video you opened my mind about combine GraphQL with WP. So far I used WP Rest API which sometimes it's an overkill way than just using this amazing technique. By the way, a very important “magic” that you mentioned at the live session with Maksim Ivanov, and maybe can help others, is the wp-webhooks plugin which takes care of the automation when a new post is created. Thanks, this is gold :)
i believe because it's querying via GraphQL it can take advantage of query cache with Next.js but generally speaking with static sites rebuilding an entire site over and over will be more time than serverside rendering. That said, Netlify announced Distributed Persistent Rendering which should take away any of those concerns! www.netlify.com/blog/2021/04/14/distributed-persistent-rendering-a-new-jamstack-approach-for-faster-builds/
@@colbyfayock Thanks for reply. I have tried as per you instruction in my local machine. I feel performance is very slow, how can we improve. After click post title, taking 3 or 4 second to click and open the page. We have plain page title and content that's it.
@@selvamsubramanyam you're somewhat at the mercy of the request. you can try adjusting the caching with Apollo client to work more favorably. the good news is if you use static compilation it would only be slow in development
Can u please do a tutorial on how to set up authentication for your wpgraphql endpoint using nextjs and not this starter, this starter has a lot of moving parts that need more knowledge i think and not good for my use case.:(
thanks for the idea, but honestly doubt i'll get to that anytime soon. this starter i made for demos and testing is a little outdated but may help: github.com/colbyfayock/next-wpgraphql-basic-starter
@@techstacker5361 no real reason, i just slightly prefer Netlify personally, they're both really great tools. i like the UI a little bit better and it's also where i manage all of my work so it's in one place, but i should vary where i deploy a little bit to help show the options 🤔
After following this video, it is my first time using Headlesss cms + frontend. If I am using this method to build for a client. Is there any free hosting stuff available for admin dashboard?
Hi Colby, great video. I did this same thing on locahost. Essentially my project consisted of a very very basic WP theme, WP's Rest API and a React app created with npx create-react-app. I don't know much about Next JS yet. Would my set up still make this headless?
if you're using the REST API with a non-wordpress frontend then yup! I'd recommend checking out WPGraphQL, it's a great tool for working with WordPress data.
Hey awesome stuff! I get errors when trying to npm run dev. Unexpected token < in JSON at position 0 / and some errors with node_modules / @apollo and zen-observable. I wonder If I need to install some dependencies, or if it's something up with my graphql from my wordpress site?
did you install the WPGraphQL plugin in WordPress? unless configured otherwise, you should be able to go to /graphql for your wordpress installation and see a response like this: nextwpprod.wpengine.com/graphql
@@colbyfayock Yeah, in my existing blog non-fungi.com/graphql - I wonder if I need to install graphql and apollo from the terminal, or if it's something to do with recaptcha blocking it. I was able to console log some post titles in another project I was working on...maybe I should try a fresh install of wordpress
have a bunch of people who have but dont have a list ot point to any live projects beyond my 2 spacejelly.dev/ colbyfayock.com/ running into any issues or just curious?
all good 'till the "npm run dev"... getting an error saying: Failed to fetch posts from localsite:8890/graphql: request to localsite:8890/graphql failed, reason: unable to verify the first certificate any clue on how to start to fix it? it doesn't work with secure protocol?
Haven't seen that one before - the starter uses Apollo Client but it seems like this may be a node issue, either way unrelated to the Starter Maybe try this? medium.com/@woeterman_94/graphql-codegen-unable-to-verify-first-certificate-87fd42638b98
@@colbyfayock already tried with no luck, maybe is just some issue in my local environment, don't bother. if I figure out how to solve it i will let you know, meanwhile keep on this amazing stuff you're doing. a big thumbs up for you mate 👍🏼
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
You killed that intro 👍
thank you!
Thanks Colby, really like the demo walkthrough
no problem!
Thanks Colby for that project starter. I was wondering if you have a tutorial where you built that project starter from scratch
i dont have anything on my channel, but i made a video that might help for Program with Erik ua-cam.com/video/DuIwk6U7mo4/v-deo.html
@@colbyfayock Thank you like what u do ✨
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
Excellent WordPress work!
thank you!
Cheers for that Colby, would love to see a WooCommerce (e-commercE) WordPress headless CMS setup.
thank you!! not sure ill get to that soon but i'll add it to my list
This is very cool! I'm still learning Nextjs, so I'm having trouble creating new pages
just released a video today to help with that :) ua-cam.com/video/pjhjqUrG9O4/v-deo.html
@@colbyfayock Thanks. You are the best! ;)
Hey Colby, do you have a video on how setup the draft posts? Since they will need the authentication to be previewed? Would love to watch a video from you on this topic as you explain these things so well.
hey i dont currently have a video like that, but it's a great idea. ill add it to my list!
@@colbyfayock Look forward to it!
Hi Colby, thanks a loto for the video and the starter theme. Don't know why but I get 404 from all the pages, posts and categories are working fine
seems like you figured it out on GitHub github.com/colbyfayock/next-wordpress-starter/issues/354
Hello! Thanks for the video! What if i have a wordpress installation as backend using GraphQL? Is the process similar to this?
thats exactly what this covers! :)
Since it is statically generated doesnt that mean we have to rebuild each time we make a new post?
Kind of. Netlify and vercel both offer solutions to avoiding this. Netlify and dpr build the pages first request then store it for the rest of that builds lifecycle. Nextjs and ISR basically do cache invalidation where you configure how often you want it to refresh
Hi! do you also have any templates that offer latest version (nextjs + wordpress cms)? I tried to use yours on github(it seems that it's src paths). and because it's our of date, i can't deploy it on vercel. if you have any templates that offers latest, I am willing to purchase!
Thanks Coby Mate 👌🏾
🙌
Hello Colby!
Thank you so much, this is exactly what I was missing!
Do you have a video or maybe you plan to release a video on how to upload a headless WordPress + Next onto a VPS server?
sorry can't imagine getting to something like that :(
Great video, can you add ACF into it?
yes!! ACF works great with WPGraphQL. here's my video walking through it :) ua-cam.com/video/mMaw1LMClwQ/v-deo.html
and Yoast SEO if interested ua-cam.com/video/fb8Twa02aww/v-deo.html
@@colbyfayock Dude you are awesome!
@@RobertThomasrob_thomasa10 🙌
Great video! Can you make a video with Nextjs and sanity.io?
hey don't have a video yet, but i have an article you can check out on egghead.io! egghead.io/blog/build-cms-for-ecommerce-store-with-nextjs-and-sanity
i'll add it to my list though
wordpress free plan doesn't allow u to add any plugin .Does aws lightsail allow me to add plugin for free ? I want to try for educational purposes
aws lightsail isn't free, but they allow you to add plugins. your best option may be creating a WordPress instance locally and playing with it there, could try using localwp.com/ - but that won't be available on the internet
Thanks 😊 🙏
** Does the WordPress portion need to be on a 'live' server for the Netlify part? I did my WordPress part on localwp ...? Seems as long as the server is running it might work; no luck so far tho...
it only needs to be available when Netlify is actively deploying but Netlify needs to have access to it through the internet, so if it's only available locally on your computer, it may not be able to access it
@@colbyfayock Makes sense thank you!
Hello colby,
I want to host two websites:
1 - wordpress headless as backend
2- nextjs application as front end
what is the best formula to host both
hey! thats a pretty common scenario for using wordpress headlessly. as far as a formula goes, are you asking for recommendations for providers to host on?
@@colbyfayock yes plz
@@TaderSalahEddine
For WordPress:
WP Engine is great for premium projects (a little pricier, but good service)
I've had luck with AWS Lightsail in the past, but it's a little more hands-on to configure a few things
There are a lot of others you could use
For Front End:
I really like Netlify, it's who I generally use
Vercel who makes Next.js is also fantastic
It's a little more limited who can deploy Next.js apps but there might be a few more
So I'm assuming that you just use a different domain name for the WordPress portion (can you give an example) then and for the Next.js frontend side then you connect your 'real domain name' and do all of the SEO and Accessibility things on the Next side... is this correct? ** Also on the WordPress site would you just check the box for 'discourage search engines' box then too?? THANK YOU!! :)
yes! exactly. typically yeah, you would check that box, but if you're using plugins like Yoast SEO, it actually disables some settings because it think its not supposed to include the SEO tags 😅
@@colbyfayock Ok you kinda lost me there; I thought you would do the SEO on the Next.js side so why would it matter if Yoast disabled some settings?
@@amystout8696 yeahhh it's a bit confusing, i'll break it down
So with WordPress we get a front end by default. there's a plugin called Yoast SEO that give you the ability to manage SEO tags like title and description and more
when using WordPress headlessly (like we are in this video), we request our data from WordPress and bypass that default front end, this includes Yoast SEO data. the issue is that front end still works if you don't intentionally disable it, meaning, if you have wp.mydomain.com and mydomain.com that uses it, both websites would have a visible front end
now WordPress has a feature to prevent robots from crawling it that you can turn on. it's a good way to have both sites, but the one just wont get indexed by google. it adds a noindex tag i believe. the issue however is when using Yoast SEO, yoast uses that flag to determine what to return when requesting data from WordPress, so if you want to receive all of your data, you can't check that flag, but then that creates an issue with your WordPress front end being available to crawl
another way of handling the WordPress side is to create a theme that is empty, basically just turning off the front end, then you wouldn't worry about checking that flag and get all of your data
hope that helps
@@colbyfayock Wow awesome reply! Yes it does help! I'm very familiar with Yoast, ok I think I understand, thank you!
How would you handle custom post types?
You can use the Custom Post Type UI plugin! there should be an option when creating to "show in graphql" and as long as that's selected, it will be available to query. realizing i dont have a video for that one, adding to my list
@@colbyfayock YES YES YES, video on the Custom Post Types and selecting them for query; be soo cool ;-) !
can i deploy it on vercel
Definitely!
Awesome! started it seamlessly! However I do I have a question not seen in the documentation If I want to deploy this to shared hosting site like wordpress or on my home server how would I go about that? would I need to change package.json and remove the "next export". If you have another video about deploying this It would really help thanks!
hey good question! so when you run `yarn build` it will export static HTML, CSS, and JS files into the `out` directory, so really, you should be able to server that from any type of web server.
now you can serve the project from a _node_ server, and the way you would do that is optionally remove the `next export` like you were saying, but when the server starts up, after build, you would run `yarn start`, which would run `next start` and make the project available at the specified port.
there's definitely more details in the all of the above. the easiest way imo is to put the static `out` output somewhere that can serve those files 🤷♂️
common places to deploy Next.js lately are Vercel (who makes Next.js) and Netlify, which lets the deployment kind of "just work"
Hi Colby, thanks for the Video!
Is there any way to create a Image gallery with Images that are uploaded and can be changed in Wordpress?
there are definitely a few ways to do that!
I wouldnt be surprised if an image gallery plugin would render in the HTML to use
you could also use ACF gallery www.advancedcustomfields.com/resources/gallery/
here's an ACF tutorial but doesnt show gallery ua-cam.com/video/mMaw1LMClwQ/v-deo.html
bro, are you made multi form step. I want to make website clone of zety resume builder in which use multi step form.
Sorry I don't have a video like that
@@colbyfayock but bro, in future are you made this or not
@@adarshrathi8265 maybe in the future but no current plans
@@colbyfayock ok, thanks for your reply
So i have watched you another workdpress video, and their you have mentions about the web hook trick , so does that web hook thing works on hostinger, or it only works on netlify or vercel?
oh looks like you found the video :) heres the webhook with netlify ua-cam.com/video/_KXV75LLAm0/v-deo.html - any wordpress host should work if you can install thte plugin but the deployment platform would need the ability to trigger a deploy with a url
@@colbyfayock so my problem is I am hosting it on hostinger so does the web hook thing works on hostinger?
@@kumardeepanshu8503 i dont know that answer, you would need to see if that feature is available on hostinger
@@colbyfayock no problem, one more thing i wanted to know that, you are using netlify as nexyjs hosting, so is the starter pack of netlify good for blog websites having around 6 to 8 thousand daily user ?
@@kumardeepanshu8503 they go by bandwidth at 100gb/mo, i would try to calculate based off their plans: www.netlify.com/pricing
Hi Cobly,
I encounter this error when i tried to yarn dev.
Error: The module '/Users/...../node_modules/canvas/build/Release/canvas.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 93. This version of Node.js requires
NODE_MODULE_VERSION 83. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).
What can i do ? Thnks in advance
Ok ! I solved the problem. I just deleted the node_modules and npm install again. it works
@@francischin9789 great!
does this work only with posts or also with Wordpress page? great video btw
all the above! :) the starter has basic page support but using WPGraphQL and data fetching we can really do whatever we want
my site spacejelly.dev/ has custom post types, custom fields, it uses Yoast SEO plugin, and a few other custom things. i started the project from my Next.js WordPress Starter
source: github.com/colbyfayock/spacejelly.dev
@@colbyfayock thanks I appreciate the quick response. I’ll give it a try this week. I’ve used sanity in the past, but also wanted to give wordpress a chance
Oh I have another question, what if the wordpress site uses elementor. Will it be possible to display that data with next.js as well?
@@filipevalentegomes2383 sorry not sure about that one
@@colbyfayock thanks for the quick reply, Ill try to figure it out. Same for woocommerce, I need to find out how that works. Thanks and keep up the good work
How much content do I need on the Wordpress site for the starter to work? I just went with a default WP starter but keep getting an error in the terminal: GraphQL Request must include at least one of those two parameters: "query" or "queryId" ?
Ahh, sorry - I guess I missed something using the FakerPress plugin, not sure how I messed up? 😆 But I created a bit more fake content and everything is now up and running. This is really a great starter for someone new to Next.js - coming from Gatsby I guess there is a bit for me to learn!
@@LarsEjaas thanks Lars :) I'm curious why it wasn't working though before you ran Faker, I would have expected it to work with the default content WordPress comes with out of the box 🤔 but glad you got it working!
@@colbyfayock Not sure really. It seems like something here isn't working without any data to fetch with the graphQL API? I have run into something similar in Gatsby - but I didn't really debug too much - sorry!
Dang it! Lol I want to use this but I keep running into errors and I just don’t have the time to troubleshoot.. I’ll be back tho..
ah are you running into errors with the Starter? what issues are you seeing? let me know when you have time!
@@colbyfayock I fixed it! It was a goof on my end at first using the wrong endpoint url, then there was an issue with the use of hooks that disappeared with with a fresh install, its working perfectly now, thanks!
@@kindofadev ahh okay, glad you got it working!
Hey Colby, I created a Nextjs Hdlss WP Instance but having crazy slow down times on the Wordpress Admin Dashboard. I have a few Custom Post Types+Pages+Posts using Graphql and faustjs for schema generation. Images are using the Nextjs image tag to be called on the frontend. Perhaps it sthe dangerously set html call? HAve you run into these types of issues?
Hey Ethan. The website or WordPress admin is slow? I haven't used Faust but the website won't impact the WordPress instance beyond making calls to the API whenever it does. I doubt dangerouslyset is the culprit if it's the website that's slow. The only thing I've run into is slowness on development due to the nature of the API requests having to be made before each page loads
Hi Colby, thanks for the great information!
I hope you can help me with 2 questions:
1. Is there a way to add ssl certificate for the Lightsail instance while its still a static ip (with no domain attached)?
2. Is there a way to prevent others from reaching the WP endpoints so only my app can display the content?
Thanks :)
hey Daniel, good question, I'm not really sure about #1. As far as #2, I know you can do advanced networking within AWS, but I'm not sure if you can do that while attached through Lightsail. I think technically lightsail creates EC2 instances so you may be able to figure something out there. this is kind of beyond my current know-how though haha so can't really direct you too much further, hope that helps though
@@colbyfayock
Thanks Colby! Yeah, it's pretty tricky to find solutions for those anecdotes lol. But yet, in 12 minutes video you opened my mind about combine GraphQL with WP. So far I used WP Rest API which sometimes it's an overkill way than just using this amazing technique. By the way, a very important “magic” that you mentioned at the live session with Maksim Ivanov, and maybe can help others, is the wp-webhooks plugin which takes care of the automation when a new post is created. Thanks, this is gold :)
where did you host your wordPress backend?
I'm currently hosting with AWS Lightsail for $3.50/mo!
What if I have 500 post does netlify build will slow?
i believe because it's querying via GraphQL it can take advantage of query cache with Next.js but generally speaking with static sites rebuilding an entire site over and over will be more time than serverside rendering. That said, Netlify announced Distributed Persistent Rendering which should take away any of those concerns! www.netlify.com/blog/2021/04/14/distributed-persistent-rendering-a-new-jamstack-approach-for-faster-builds/
@@colbyfayock Thanks Colby
Great video. Here how can we get custom post types and custom taxonomies.
I dont have a video yet about custom post types but here's how you can do custom fields: ua-cam.com/video/mMaw1LMClwQ/v-deo.html
@@colbyfayock Thanks for reply. I have tried as per you instruction in my local machine. I feel performance is very slow, how can we improve. After click post title, taking 3 or 4 second to click and open the page. We have plain page title and content that's it.
@@selvamsubramanyam you're somewhat at the mercy of the request. you can try adjusting the caching with Apollo client to work more favorably. the good news is if you use static compilation it would only be slow in development
@@colbyfayock Sure, will check. Thanks.
Such a great tutorial! Thanks a lot man
no problem!
Can u please do a tutorial on how to set up authentication for your wpgraphql endpoint using nextjs and not this starter, this starter has a lot of moving parts that need more knowledge i think and not good for my use case.:(
thanks for the idea, but honestly doubt i'll get to that anytime soon. this starter i made for demos and testing is a little outdated but may help: github.com/colbyfayock/next-wpgraphql-basic-starter
Gr8 vid, thank you 🙏
you got it!
Can i deploy this on Vercel instead on Netlify? Yes right?
yes absolutely!
@@colbyfayock what made you choose Netlify over Vercel? Just curious :)
@@techstacker5361 no real reason, i just slightly prefer Netlify personally, they're both really great tools. i like the UI a little bit better and it's also where i manage all of my work so it's in one place, but i should vary where i deploy a little bit to help show the options 🤔
@@colbyfayock yeah it would be awesome with a small tutorial on how to deploy this frontend on Vercel as well
Love your content btw 👌
@@techstacker5361 thank you! 🙏
After following this video, it is my first time using Headlesss cms + frontend. If I am using this method to build for a client. Is there any free hosting stuff available for admin dashboard?
tools like Netlify and Vercel both have free tiers
Hi Colby, great video. I did this same thing on locahost. Essentially my project consisted of a very very basic WP theme, WP's Rest API and a React app created with npx create-react-app. I don't know much about Next JS yet. Would my set up still make this headless?
if you're using the REST API with a non-wordpress frontend then yup! I'd recommend checking out WPGraphQL, it's a great tool for working with WordPress data.
@@colbyfayock Oh yes, I forgot to mention that. I am using WP GraphQL. It helps with the different endpoints available.
may i you this template and custom for my own..?
it's licensed under MIT :) github.com/colbyfayock/next-wordpress-starter/blob/main/LICENSE
Hi! awesome video. however, when i tried to do pm run dev it showed this error -> ReferenceError: globalThis is not defined - Can you help me? 🙏
hey! thanks. what node version are you using? can run node -v. i think there's a minimum version required (maybe 12?)
great!
thanks!
Hey awesome stuff! I get errors when trying to npm run dev. Unexpected token < in JSON at position 0 / and some errors with node_modules / @apollo and zen-observable. I wonder If I need to install some dependencies, or if it's something up with my graphql from my wordpress site?
did you install the WPGraphQL plugin in WordPress? unless configured otherwise, you should be able to go to /graphql for your wordpress installation and see a response like this: nextwpprod.wpengine.com/graphql
@@colbyfayock Yeah, in my existing blog non-fungi.com/graphql - I wonder if I need to install graphql and apollo from the terminal, or if it's something to do with recaptcha blocking it. I was able to console log some post titles in another project I was working on...maybe I should try a fresh install of wordpress
@@colbyfayock It worked on a different wp install! Awesome stuff! thanks
@@jdubhman thats strange! if you end figuring out the issue would be curious to hear. glad you got something working though
Having the same problem as well. Now trying to install a fresh wordpress and import all existing contents there. Thank you.
Nice bro
thank you! 🙌
so cool :)
thank you!
anyone tried to use this repo to creatw project? 🤔
have a bunch of people who have but dont have a list ot point to any live projects beyond my 2 spacejelly.dev/ colbyfayock.com/
running into any issues or just curious?
Hi, what email can I send you a business offer?
hey! you can reach me at hello@colbyfayock.com
great
thanks!
Every time I see a template I switch the video because the creator can't explain it.
all good 'till the "npm run dev"... getting an error saying:
Failed to fetch posts from localsite:8890/graphql: request to localsite:8890/graphql failed, reason: unable to verify the first certificate
any clue on how to start to fix it? it doesn't work with secure protocol?
Haven't seen that one before - the starter uses Apollo Client but it seems like this may be a node issue, either way unrelated to the Starter
Maybe try this? medium.com/@woeterman_94/graphql-codegen-unable-to-verify-first-certificate-87fd42638b98
@@colbyfayock already tried with no luck, maybe is just some issue in my local environment, don't bother. if I figure out how to solve it i will let you know, meanwhile keep on this amazing stuff you're doing. a big thumbs up for you mate 👍🏼
@@efestudio sounds great, np, good luck!