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

Поділитися
Вставка
  • Опубліковано 14 гру 2024

КОМЕНТАРІ • 98

  • @JamesQQuick
    @JamesQQuick  3 роки тому +4

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

    • @trollgg777
      @trollgg777 3 роки тому

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

  • @colbyfayock
    @colbyfayock 3 роки тому +8

    thanks for the shoutout! 🙌 great stuff

  • @salymakhmedov2196
    @salymakhmedov2196 3 роки тому +5

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

    • @rayc3103
      @rayc3103 3 роки тому

      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.

  • @maurolobo3450
    @maurolobo3450 11 місяців тому

    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
    @glecio1203 11 місяців тому

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

  • @janik6n
    @janik6n 3 роки тому +7

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

    • @JamesQQuick
      @JamesQQuick  3 роки тому

      Not sure what you mean specifically?

    • @janik6n
      @janik6n 3 роки тому +7

      @@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
      @piotrzakrzewski5643 3 роки тому +6

      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
      @deliquent2703 3 роки тому +1

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

    • @piotrzakrzewski5643
      @piotrzakrzewski5643 3 роки тому

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

  • @DreamCreateCommunicate
    @DreamCreateCommunicate Рік тому +6

    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
      @gabrielmoraes4516 Рік тому +3

      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
      @beyourahi Рік тому +1

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

  • @simbolmina
    @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

  • @ballpen9157
    @ballpen9157 10 місяців тому

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

  • @kant859600
    @kant859600 3 роки тому +2

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

    • @JamesQQuick
      @JamesQQuick  3 роки тому +2

      Strapi is pretty awesome as well!

    • @ankit.chaurasia
      @ankit.chaurasia 3 роки тому

      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
    @vahesevachyan9399 3 роки тому

    Congrats on 100k, well deserved.

  • @stewtech
    @stewtech 7 місяців тому

    Can this be built locally using xampp?

  • @osherezra8460
    @osherezra8460 3 роки тому +3

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

    • @JamesQQuick
      @JamesQQuick  3 роки тому +7

      Maybe I should do a deployment video!

    • @osherezra8460
      @osherezra8460 3 роки тому +1

      @@JamesQQuick Yep yep yep :) thank you

    • @Allformyequine
      @Allformyequine 3 роки тому +2

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

  • @Geomaverick124
    @Geomaverick124 3 роки тому +7

    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.

  • @djlee0721
    @djlee0721 3 роки тому +1

    Cool logo!

  • @CodeWithTomi
    @CodeWithTomi 3 роки тому +2

    Another great content!

  • @twinprimes8353
    @twinprimes8353 Рік тому

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

  • @HimanshuYT
    @HimanshuYT 3 роки тому +1

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

    • @JamesQQuick
      @JamesQQuick  3 роки тому +4

      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!

  • @asapsvicide9742
    @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!

  • @chasingkairos9982
    @chasingkairos9982 3 роки тому +1

    What icon theme re you using?

  • @DrSarge37
    @DrSarge37 Рік тому +1

    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
      @JamesQQuick  Рік тому +1

      Great feedback! Thanks for watching.

  • @alexandresibre9979
    @alexandresibre9979 Рік тому

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

    • @SarthakKaushikwebdeveloper
      @SarthakKaushikwebdeveloper Рік тому

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

  • @gangamanijayaram3997
    @gangamanijayaram3997 2 роки тому

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

  • @siisanda_giiven
    @siisanda_giiven 2 роки тому

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

    • @JamesQQuick
      @JamesQQuick  2 роки тому +1

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

  • @mohasinkr
    @mohasinkr 8 місяців тому

    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

  • @johanberglund6733
    @johanberglund6733 3 роки тому

    Can you make video deplouying it on hostinger as well?

  • @gabriel-mk7jk
    @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

  • @Allformyequine
    @Allformyequine 3 роки тому +1

    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... ;-) !!

  • @chaunguyen231
    @chaunguyen231 Рік тому

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

  • @pjf7044
    @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 ?

  • @visualmodo
    @visualmodo 3 роки тому

    Very good WordPress video!

  • @jeffreynwankwo7912
    @jeffreynwankwo7912 3 роки тому

    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
      @emo7122 3 роки тому

      use vercel

  • @homendutta
    @homendutta Рік тому

    can i deploy it on vercel

  • @juanmanuelsolis9705
    @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?

  • @NinjaTeamWP
    @NinjaTeamWP 3 роки тому

    Great! Thanks for the heads up

  • @vishnudarshan4762
    @vishnudarshan4762 3 роки тому

    Can we please have your VSCode settings file

  • @edulguedes
    @edulguedes 2 роки тому

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

  • @sarath9077
    @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
      @JamesQQuick  3 роки тому +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
      @Thpoirier 3 роки тому +1

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

  • @moniruzzamansaikat
    @moniruzzamansaikat 3 роки тому

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

    • @JamesQQuick
      @JamesQQuick  3 роки тому

      CodeSTACKr theme in this one I believe

  • @yogaaryasa2684
    @yogaaryasa2684 2 роки тому

    Is it still working in 2022?

  • @awenn2015
    @awenn2015 2 роки тому

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

  • @aseel1024
    @aseel1024 3 роки тому +2

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

  • @yomajo
    @yomajo 2 роки тому

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

  • @pjf7044
    @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

  • @sbrugby1
    @sbrugby1 3 роки тому +2

    This just looks like normal wordpress with extra steps.

    • @JamesQQuick
      @JamesQQuick  3 роки тому +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
      @Adam-nw1vy Рік тому +1

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

  • @stephenselvaraj8960
    @stephenselvaraj8960 3 роки тому

    Super :)

  • @cau8777
    @cau8777 2 роки тому +2

    You are recommending hostinger, is this a joke ?

    • @JamesQQuick
      @JamesQQuick  2 роки тому

      Worked well for me. Have you used it before?

  • @skyhigheagleer6
    @skyhigheagleer6 3 роки тому +9

    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.

  • @benlloydmcclelland
    @benlloydmcclelland 10 місяців тому

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

  • @dinoscheidt
    @dinoscheidt 3 роки тому +1

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

  • @alfieqashwa
    @alfieqashwa 3 роки тому

    Is that your kid?

  • @alexlytle089
    @alexlytle089 3 роки тому +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
      @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.

    • @philsmithies
      @philsmithies 2 роки тому

      It is a tutorial thats the basics to help people on a bigger project

  • @ahmedsamir-m8s
    @ahmedsamir-m8s 3 роки тому

    Sadly this repo is hell complicated

    • @JamesQQuick
      @JamesQQuick  3 роки тому +2

      It does a lot of really good stuff. Any particular parts you find particularly confusing?

  • @deniss.3661
    @deniss.3661 3 роки тому

    Hi, what email can I send you a business offer?

  • @awenn2015
    @awenn2015 2 роки тому

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