Next.js with Headless WordPress - GraphQL Queries with WPGraphQL & Deploy to Netlify

  Рет қаралды 19,758

Colby Fayock

Colby Fayock

Күн бұрын

Learn how to create a new static Next.js app sourcing content from a headless WordPress instance using Next.js WordPress Starter.
github.com/colbyfayock/next-w...
🧐 What's Inside
00:00 - Intro
00:09 - Tool we'll use to create a Next.js WordPress site
01:59 - Reviewing WordPress installation
02:29 - Installing WPGraphQL and querying WordPress content with GraphQL
03:46 - Creating a new Next.js app with Next.js WordPress Starter
04:26 - Adding WordPress GraphQL endpoint as an environment variable
05:25 - Starting local development server and reviewing what comes with Next.js WordPress Starter
07:44 - Connecting a GitHub project repository to Netlify, configuring, and deploying the Next.js WordPress app
10:29 - Adding a custom site name in Netlify
11:30 - Outro
🗒️ Read More
spacejelly.dev/posts/how-to-c...
🔔 Subscribe for more tech and developer videos
kzfaq.info?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
github.com/sponsors/colbyfayock
👨‍🚀 Brought to by colbyfayock.com
www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
www.colbyfayock.com/what-i-use
🧰 More Resources
Next.js WordPress Starter
github.com/colbyfayock/next-w...
Demo
next-wordpress-starter.netlif...
WPGraphQL
www.wpgraphql.com/
🎼 Music
Music from Uppbeat (free for Creators!):
uppbeat.io/t/jonny-boyle/brig...
License code: RW1VJVFWVH7CJT7P
#colbyfayock #nextjs #wordpress #jamstack #webdevelopment

Пікірлер: 162
@colbyfayock
@colbyfayock Жыл бұрын
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
@jordanbienvenue468
@jordanbienvenue468 2 жыл бұрын
Thanks Colby, really like the demo walkthrough
@colbyfayock
@colbyfayock 2 жыл бұрын
no problem!
@visualmodo
@visualmodo 3 жыл бұрын
Excellent WordPress work!
@colbyfayock
@colbyfayock 3 жыл бұрын
thank you!
@adamthedev
@adamthedev 3 жыл бұрын
Such a great tutorial! Thanks a lot man
@colbyfayock
@colbyfayock 3 жыл бұрын
no problem!
@jneal4154
@jneal4154 2 жыл бұрын
You killed that intro 👍
@colbyfayock
@colbyfayock 2 жыл бұрын
thank you!
@cryptominero8820
@cryptominero8820 10 ай бұрын
Thanks Coby Mate 👌🏾
@colbyfayock
@colbyfayock 10 ай бұрын
🙌
@isagive
@isagive 2 жыл бұрын
Gr8 vid, thank you 🙏
@colbyfayock
@colbyfayock 2 жыл бұрын
you got it!
@estevanulian
@estevanulian 2 жыл бұрын
This is very cool! I'm still learning Nextjs, so I'm having trouble creating new pages
@colbyfayock
@colbyfayock 2 жыл бұрын
just released a video today to help with that :) kzfaq.info/get/bejne/ptCYndSG162df2g.html
@estevanulian
@estevanulian 2 жыл бұрын
@@colbyfayock Thanks. You are the best! ;)
@lmd4881
@lmd4881 3 жыл бұрын
so cool :)
@colbyfayock
@colbyfayock 3 жыл бұрын
thank you!
@antware
@antware 7 ай бұрын
Cheers for that Colby, would love to see a WooCommerce (e-commercE) WordPress headless CMS setup.
@colbyfayock
@colbyfayock 7 ай бұрын
thank you!! not sure ill get to that soon but i'll add it to my list
@mvegap
@mvegap 3 жыл бұрын
Nice bro
@colbyfayock
@colbyfayock 3 жыл бұрын
thank you! 🙌
@danielkusper2691
@danielkusper2691 2 жыл бұрын
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.
@colbyfayock
@colbyfayock 2 жыл бұрын
hey i dont currently have a video like that, but it's a great idea. ill add it to my list!
@danielkusper2691
@danielkusper2691 2 жыл бұрын
@@colbyfayock Look forward to it!
@alassanendoye8255
@alassanendoye8255 2 жыл бұрын
Thanks Colby for that project starter. I was wondering if you have a tutorial where you built that project starter from scratch
@colbyfayock
@colbyfayock 2 жыл бұрын
i dont have anything on my channel, but i made a video that might help for Program with Erik kzfaq.info/get/bejne/ett5qs5nup3Rn2g.html
@alassanendoye8255
@alassanendoye8255 2 жыл бұрын
@@colbyfayock Thank you like what u do ✨
@alekseyberezov8020
@alekseyberezov8020 Жыл бұрын
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?
@colbyfayock
@colbyfayock Жыл бұрын
sorry can't imagine getting to something like that :(
@eliapellegrino5438
@eliapellegrino5438 2 жыл бұрын
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
@colbyfayock
@colbyfayock 2 жыл бұрын
seems like you figured it out on GitHub github.com/colbyfayock/next-wordpress-starter/issues/354
@eguchiyuuki
@eguchiyuuki 11 ай бұрын
great!
@colbyfayock
@colbyfayock 11 ай бұрын
thanks!
@shaunpx1
@shaunpx1 3 жыл бұрын
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!
@colbyfayock
@colbyfayock 3 жыл бұрын
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"
@dandin1984
@dandin1984 3 жыл бұрын
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 :)
@colbyfayock
@colbyfayock 3 жыл бұрын
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
@dandin1984
@dandin1984 3 жыл бұрын
@@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 :)
@user-ts7cj7rj7j
@user-ts7cj7rj7j Жыл бұрын
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!
@ethansilver8570
@ethansilver8570 2 жыл бұрын
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?
@colbyfayock
@colbyfayock 2 жыл бұрын
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
@lkHSV08
@lkHSV08 2 жыл бұрын
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?
@colbyfayock
@colbyfayock 2 жыл бұрын
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 kzfaq.info/get/bejne/o7ORqpR9sqnQp4U.html
@SkyrimBeast
@SkyrimBeast 2 жыл бұрын
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?
@colbyfayock
@colbyfayock 2 жыл бұрын
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.
@SkyrimBeast
@SkyrimBeast 2 жыл бұрын
@@colbyfayock Oh yes, I forgot to mention that. I am using WP GraphQL. It helps with the different endpoints available.
@sonwander1
@sonwander1 Жыл бұрын
Hello! Thanks for the video! What if i have a wordpress installation as backend using GraphQL? Is the process similar to this?
@colbyfayock
@colbyfayock Жыл бұрын
thats exactly what this covers! :)
@unknownman1
@unknownman1 3 жыл бұрын
great
@colbyfayock
@colbyfayock 3 жыл бұрын
thanks!
@obayuwanapaul1378
@obayuwanapaul1378 3 жыл бұрын
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?
@colbyfayock
@colbyfayock 3 жыл бұрын
tools like Netlify and Vercel both have free tiers
@CoolPupGaming
@CoolPupGaming 2 жыл бұрын
Since it is statically generated doesnt that mean we have to rebuild each time we make a new post?
@colbyfayock
@colbyfayock 2 жыл бұрын
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
@Allformyequine
@Allformyequine 2 жыл бұрын
** 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...
@colbyfayock
@colbyfayock 2 жыл бұрын
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
@amystout8696
@amystout8696 2 жыл бұрын
@@colbyfayock Makes sense thank you!
@selvamsubramanyam
@selvamsubramanyam 3 жыл бұрын
Great video. Here how can we get custom post types and custom taxonomies.
@colbyfayock
@colbyfayock 3 жыл бұрын
I dont have a video yet about custom post types but here's how you can do custom fields: kzfaq.info/get/bejne/o7ORqpR9sqnQp4U.html
@selvamsubramanyam
@selvamsubramanyam 3 жыл бұрын
@@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.
@colbyfayock
@colbyfayock 3 жыл бұрын
@@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
@selvamsubramanyam
@selvamsubramanyam 3 жыл бұрын
@@colbyfayock Sure, will check. Thanks.
@charmaineroseenot7990
@charmaineroseenot7990 3 жыл бұрын
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? 🙏
@colbyfayock
@colbyfayock 3 жыл бұрын
hey! thanks. what node version are you using? can run node -v. i think there's a minimum version required (maybe 12?)
@DevThought
@DevThought 3 жыл бұрын
Great video! Can you make a video with Nextjs and sanity.io?
@colbyfayock
@colbyfayock 3 жыл бұрын
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
@LarsEjaas
@LarsEjaas 3 жыл бұрын
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" ?
@LarsEjaas
@LarsEjaas 3 жыл бұрын
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!
@colbyfayock
@colbyfayock 3 жыл бұрын
@@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!
@LarsEjaas
@LarsEjaas 3 жыл бұрын
@@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!
@jdubhman
@jdubhman 3 жыл бұрын
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?
@colbyfayock
@colbyfayock 3 жыл бұрын
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
@jdubhman
@jdubhman 3 жыл бұрын
@@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
@jdubhman
@jdubhman 3 жыл бұрын
@@colbyfayock It worked on a different wp install! Awesome stuff! thanks
@colbyfayock
@colbyfayock 3 жыл бұрын
@@jdubhman thats strange! if you end figuring out the issue would be curious to hear. glad you got something working though
@bangtipen
@bangtipen 3 жыл бұрын
Having the same problem as well. Now trying to install a fresh wordpress and import all existing contents there. Thank you.
@Allformyequine
@Allformyequine 2 жыл бұрын
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!! :)
@colbyfayock
@colbyfayock 2 жыл бұрын
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
@amystout8696 2 жыл бұрын
@@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?
@colbyfayock
@colbyfayock 2 жыл бұрын
​@@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
@Allformyequine
@Allformyequine 2 жыл бұрын
@@colbyfayock Wow awesome reply! Yes it does help! I'm very familiar with Yoast, ok I think I understand, thank you!
@mohammedalkhalaf6374
@mohammedalkhalaf6374 3 жыл бұрын
where did you host your wordPress backend?
@colbyfayock
@colbyfayock 3 жыл бұрын
I'm currently hosting with AWS Lightsail for $3.50/mo!
@francischin9789
@francischin9789 3 жыл бұрын
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
@francischin9789
@francischin9789 3 жыл бұрын
Ok ! I solved the problem. I just deleted the node_modules and npm install again. it works
@colbyfayock
@colbyfayock 3 жыл бұрын
@@francischin9789 great!
@TaderSalahEddine
@TaderSalahEddine Жыл бұрын
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
@colbyfayock
@colbyfayock Жыл бұрын
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
@TaderSalahEddine Жыл бұрын
@@colbyfayock yes plz
@colbyfayock
@colbyfayock Жыл бұрын
@@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
@homendutta
@homendutta Жыл бұрын
can i deploy it on vercel
@colbyfayock
@colbyfayock Жыл бұрын
Definitely!
@HimanshuYT
@HimanshuYT 3 жыл бұрын
What if I have 500 post does netlify build will slow?
@colbyfayock
@colbyfayock 3 жыл бұрын
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/
@HimanshuYT
@HimanshuYT 3 жыл бұрын
@@colbyfayock Thanks Colby
@Shawn-Mosher
@Shawn-Mosher 3 жыл бұрын
How would you handle custom post types?
@colbyfayock
@colbyfayock 3 жыл бұрын
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
@Allformyequine
@Allformyequine 2 жыл бұрын
@@colbyfayock YES YES YES, video on the Custom Post Types and selecting them for query; be soo cool ;-) !
@sarasmiletv
@sarasmiletv Жыл бұрын
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
@colbyfayock
@colbyfayock Жыл бұрын
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
@sarasmiletv
@sarasmiletv Жыл бұрын
Thanks 😊 🙏
@kindofadev
@kindofadev 3 жыл бұрын
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..
@colbyfayock
@colbyfayock 3 жыл бұрын
ah are you running into errors with the Starter? what issues are you seeing? let me know when you have time!
@kindofadev
@kindofadev 3 жыл бұрын
@@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!
@colbyfayock
@colbyfayock 3 жыл бұрын
@@kindofadev ahh okay, glad you got it working!
@kumardeepanshu8503
@kumardeepanshu8503 2 жыл бұрын
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?
@colbyfayock
@colbyfayock 2 жыл бұрын
oh looks like you found the video :) heres the webhook with netlify kzfaq.info/get/bejne/lbGIiZpmsbKlnWQ.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
@kumardeepanshu8503
@kumardeepanshu8503 2 жыл бұрын
@@colbyfayock so my problem is I am hosting it on hostinger so does the web hook thing works on hostinger?
@colbyfayock
@colbyfayock 2 жыл бұрын
@@kumardeepanshu8503 i dont know that answer, you would need to see if that feature is available on hostinger
@kumardeepanshu8503
@kumardeepanshu8503 2 жыл бұрын
@@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 ?
@colbyfayock
@colbyfayock 2 жыл бұрын
@@kumardeepanshu8503 they go by bandwidth at 100gb/mo, i would try to calculate based off their plans: www.netlify.com/pricing
@adarshrathi8265
@adarshrathi8265 2 жыл бұрын
bro, are you made multi form step. I want to make website clone of zety resume builder in which use multi step form.
@colbyfayock
@colbyfayock 2 жыл бұрын
Sorry I don't have a video like that
@adarshrathi8265
@adarshrathi8265 2 жыл бұрын
@@colbyfayock but bro, in future are you made this or not
@colbyfayock
@colbyfayock 2 жыл бұрын
@@adarshrathi8265 maybe in the future but no current plans
@adarshrathi8265
@adarshrathi8265 2 жыл бұрын
@@colbyfayock ok, thanks for your reply
@RobertThomasrob_thomasa10
@RobertThomasrob_thomasa10 2 жыл бұрын
Great video, can you add ACF into it?
@colbyfayock
@colbyfayock 2 жыл бұрын
yes!! ACF works great with WPGraphQL. here's my video walking through it :) kzfaq.info/get/bejne/o7ORqpR9sqnQp4U.html and Yoast SEO if interested kzfaq.info/get/bejne/nMhoh9qSlZjFp6s.html
@RobertThomasrob_thomasa10
@RobertThomasrob_thomasa10 2 жыл бұрын
@@colbyfayock Dude you are awesome!
@colbyfayock
@colbyfayock 2 жыл бұрын
@@RobertThomasrob_thomasa10 🙌
@shinovar5465
@shinovar5465 Жыл бұрын
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.:(
@colbyfayock
@colbyfayock Жыл бұрын
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
@hauladv
@hauladv 2 жыл бұрын
may i you this template and custom for my own..?
@colbyfayock
@colbyfayock 2 жыл бұрын
it's licensed under MIT :) github.com/colbyfayock/next-wordpress-starter/blob/main/LICENSE
@sonnycastro6546
@sonnycastro6546 3 жыл бұрын
Can i deploy this on Vercel instead on Netlify? Yes right?
@colbyfayock
@colbyfayock 3 жыл бұрын
yes absolutely!
@techstacker5361
@techstacker5361 3 жыл бұрын
@@colbyfayock what made you choose Netlify over Vercel? Just curious :)
@colbyfayock
@colbyfayock 3 жыл бұрын
@@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 🤔
@techstacker5361
@techstacker5361 3 жыл бұрын
@@colbyfayock yeah it would be awesome with a small tutorial on how to deploy this frontend on Vercel as well Love your content btw 👌
@colbyfayock
@colbyfayock 3 жыл бұрын
@@techstacker5361 thank you! 🙏
@filipevalentegomes2383
@filipevalentegomes2383 2 жыл бұрын
does this work only with posts or also with Wordpress page? great video btw
@colbyfayock
@colbyfayock 2 жыл бұрын
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
@filipevalentegomes2383
@filipevalentegomes2383 2 жыл бұрын
@@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
@filipevalentegomes2383
@filipevalentegomes2383 2 жыл бұрын
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?
@colbyfayock
@colbyfayock 2 жыл бұрын
@@filipevalentegomes2383 sorry not sure about that one
@filipevalentegomes2383
@filipevalentegomes2383 2 жыл бұрын
@@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
@erjohn5404
@erjohn5404 2 жыл бұрын
anyone tried to use this repo to creatw project? 🤔
@colbyfayock
@colbyfayock 2 жыл бұрын
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?
@luisneves3633
@luisneves3633 3 жыл бұрын
Hi, what email can I send you a business offer?
@colbyfayock
@colbyfayock 3 жыл бұрын
hey! you can reach me at hello@colbyfayock.com
@hellelo.5840
@hellelo.5840 Жыл бұрын
Every time I see a template I switch the video because the creator can't explain it.
@efestudio
@efestudio 2 жыл бұрын
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?
@colbyfayock
@colbyfayock 2 жыл бұрын
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
@efestudio
@efestudio 2 жыл бұрын
@@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 👍🏼
@colbyfayock
@colbyfayock 2 жыл бұрын
@@efestudio sounds great, np, good luck!
The Big Headless CMS Lie (James Mikrut)
18:14
Vercel
Рет қаралды 51 М.
Heartwarming Unity at School Event #shorts
00:19
Fabiosa Stories
Рет қаралды 22 МЛН
Эффект Карбонаро и нестандартная коробка
01:00
История одного вокалиста
Рет қаралды 9 МЛН
World’s Largest Jello Pool
01:00
Mark Rober
Рет қаралды 57 МЛН
Should You Stop Using React
8:13
Ben Awad
Рет қаралды 152 М.
Next.js & WPGraphQL - Headless WordPress Tutorial
15:45
Program With Erik
Рет қаралды 9 М.
NEXT.JS 13 + STRAPI: Your OWN CMS from SCRATCH!
1:09:52
midulive
Рет қаралды 66 М.
Wordpress Headless CMS, GraphQL, and Nextjs - Let's Build a Blog
14:55
НОВЫЕ ФЕЙК iPHONE 🤯 #iphone
0:37
ALSER kz
Рет қаралды 270 М.
КРУТОЙ ТЕЛЕФОН
0:16
KINO KAIF
Рет қаралды 6 МЛН
Samsung laughing on iPhone #techbyakram
0:12
Tech by Akram
Рет қаралды 4,3 МЛН
Telefonu Parçaladım!😱
0:16
Safak Novruz
Рет қаралды 27 МЛН
1$ vs 500$ ВИРТУАЛЬНАЯ РЕАЛЬНОСТЬ !
23:20
GoldenBurst
Рет қаралды 1,9 МЛН