Skip to content
UdemyReactPaid courseAll LevelsCertificate

Next JS & WordPress: Build rapid NextJS sites with Next & WP (Udemy.com)

Next JS & Headless WordPress: Build a fully functioning real estate property website with Next.js & WordPress ~Next 2023

Created by: Tom Phillips

Last updated July 2026

icon
What you will learn

  • Increase your value and improve your knowledge as a front-end / React JS developer
  • Learn Next JS
  • Create a static, server-compiled, content-driven website using Next JS (with React JS & GraphQL)
  • Learn how to use GraphQL and GraphiQL to query data stored in Wordpress
  • Set up Wordpress as a backend to build content, then render the content as pages with React JS & GraphQL
  • Deploy your Next JS static website and rebuild whenever content changes using Vercel
  • Learn how to style Next JS apps with Tailwind CSS
  • Learn how to create custom Gutenberg blocks with ACF pro
  • Use React Context & React Hooks
  • Create custom React hooks
  • Create api endpoints with Next JS

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 96 / 100

icon
Course Description

SEPTEMBER 2023 UPDATE: This course uses the Next JS pages directory but a brand new section has been added to cover using Next JS 13.4 and the app directory, specifically converting the pages directory over to the app directory.

Do you want to improve your React JS skills and increase your value as a front-end developer?

Level-up your React skillset by learning Next.js with a Headless WordPress backend! The site we'll be building in Next JS uses React JS and GraphQL to generate and build static pages from a given dataset. This course will look at setting up Wordpress as a headless CMS while using NextJS to generate a blazing-fast server-rendered React website from WordPress data, such as custom post types, pages, menus, media, advanced custom fields, (and more!) using GraphQL to query that data.

That's right, we can actually query WordPress data using GraphQL!

We'll be creating an estate agent property website in this course, looking at initial setup and development of Next JS and WordPress locally, mapping Gutenberg blocks to React components, creating our own custom Gutenberg blocks, styling these components with Tailwind CSS and querying WordPress and Gutenberg data with GraphQL to automatically generate our static pages.

We'll look at how we can query WordPress data with GraphQL using the GraphiQL browser tool. We'll get our hands into a little bit of WordPress code as well, but not too much - the main focus here is Next JS. Once we're familiar and comfortable developing with NextJS and Wordpress, we'll progress onto setting up and deploying a live website using Vercel that re-builds our static web pages every time we update content in our WordPress backend, using webhooks.

It's recommended you have rudimentary knowledge of React. We'll be covering everything else from Next.js, WordPress, GraphQL, and Tailwind CSS!

Speed past the competition!

Next.js builds the fastest possible website. Instead of waiting to generate pages when requested, we'll be using the static generation function within Next JS to pre-build pages and lift them into a global cloud of servers (we'll be using Vercel for this) - ready to be delivered instantly to your users wherever they are.

  • No waiting for API responses

  • No waiting to render components based on requested data

  • No loading spinners!

  • No waiting for a server to compile a page to serve to the browser - these pages are already pre-compiled and ready to serve instantly to your users!


icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Tom Phillips

Tom has been a web developer for over a decade. He created WebDevEducation to provide courses that provide you with the skills you need to increase your value and thrive as a web developer. Tom's courses are fast-paced, information-dense, project-based courses that waste no time with useless fluff. Why waste 30+ hours on a course that you probably won't finish, when you can learn exactly the same thing in a quarter of the time, have a fully functioning HOSTED project at the end of it AND with the github code to prove you're capable in that technology? Learn popular web development libraries and frameworks with Tom to get ahead of the competition!

(TOMPHILL LTD - 09531652)

icon
More courses by Tom Phillips

$59.99

$19.99

$54.99

$64.99

$69.99

$64.99

icon
More React courses

$139.99

$94.99

$69.99

$99.99

$129.99

$84.99

icon
Reviews

4.8

462 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Wictor Kanerva on 9/7/2024

Good course! As many other have mentioned; it's very fast paced. You dont really have time to code along or reflect much on what is done if you watch this on 100% speed and don't pause. So I recon the runtime for it will be considerably longer than the 8h that is advertised. Also, this is more a course in how to put it all together meaning that you'll have to be familiar with NextJS and Wordpress to get the most out of it.

By Daniel Rodas on 9/2/2024

The course has been outstanding so far, with clear and easy-to-follow content. I've learned a great deal. If you're looking for a course that will expand your knowledge of working within the WordPress ecosystem, this is the one to choose. One suggestion for future improvements would be to refine the "in-between" video edits that Tom includes for additional clarification. Occasionally, these edits appear unexpectedly, which can be slightly jarring, but they don't detract from the overall quality and depth of the knowledge being shared.

By Bruno Penner on 7/11/2024

This course is mind blowing, amazing, great experience. I've done quite a few courses recently but this one was really exciting to get through. Tom is pretty fast paced though, which to me enhances the learning experience as makes the course more challenging. Definitely recommend to anyone looking to use Wordpress as a headless cms and dive deeper into React/NextJS.

By Tzvi Rafi Rivlin on 2/25/2024

I'm only halfway through, but it has been very clear and comprehensive so far. I appreciate that the instructor updates the course to keep up with changes in the programming environment, so everything has been working as it should. Through repeating the processes of building pages, blocks, custom fields, etc. I've been learning how to code along, such that I'm now sometimes getting a head start, and correctly anticipating where the instructor will go. That's effective teaching!

By Alberto D'Angelo on 12/17/2023

The course demonstrates how effectively one can replicate WordPress blocks using the BlockRenderer component in Next.js. I found the course highly beneficial and have already applied it to "reprogram" my own cookbook - www.cook-my-recipe.com . A tip for those reluctant to purchase plugins: I utilized the free version of ACF and, instead of the paid ACF Gutenberg block plugin, opted for the free version of "Lazy Blocks"... it works just the same.

By Joshua James on 6/30/2023

The information in this class is very detailed. I would also like to point out that it updated regularly. I have wanted to work with WordPress as a headless CMS with a NextJS application for quite some time now. Working through this course is really helping me to understand how all of the components can be created in the front end to mirror the Blocks in WordPress. I highly recommend this course to anyone that wants to learn headless WordPress development.

By Nicolae Tiberius Ciobota on 5/30/2023

I absolutely loved the course. And I felt challenged at every step and that is the best way to learn. Tom's knowledge of Next and WordPress is vast and I am grateful for all the tips and tricks on Guttenberg Blocks. As a WordPress user the blocks were a mystery to me. :) Thank to the course now I can even start building my own Guttenberg blocks and this is so valuable. So not only I learnt a lot on Next JS I also learnt a lot about Wordpress, PHP, API and so much much more. Ah yes and Tailwind. (I m taking Tom's Tailwind course next). I felt that the teaching speed was just a little fast but then I used the player controls to slow down, but the explanations are outstanding. Also, the course has been updated to the lates Next JS version. I was a total newbie to Next. I knew very little JavaScript from a React course I started but never finished and now I understand so much more on destructuring, on functions and so much more. So I think the course is well suited for beginners with a little JS knowledge. I also gained a lot by having to debug my typos and when I was really stuck Tom answered my problems online and helped me out. Fantastic course. The first course I actually finished on here ever :).

By Terry Marr on 4/18/2023

This course was perfect for me, but ONLY BECAUSE I'M NOT A BEGINNER. He goes quite fast, does a lot of copying/pasting (which doesn't work from videos). I was able to keep up only because I've done most of this all before. PHP, React, Nextjs, Wordpress, Gutenberg, GraphQL, TailwindCSS etc. If you are new to these things go away and take courses on them first. THIS COURSE IS FOR PUTTING ALL THE PIECES TOGETHER WITH NEXTJS 13 TO ACTUALLY BUILD A HEADLESS WORDPRESS SITE.

By Julien Chanon on 3/21/2023

Well, one of the best Udemy courses I've done so far. Tom is breaking all the problems in his lectures with a lot of valuable information. More important it's up to date. I will recommend this course to anyone who wants to learn how to use WP as a headless CMS. He speaks clearly (that's important for none English native person like myself ) and has this ' senior way ' of coding and refacto that we are looking for for this type of course. However, I'm wondering why Layouts aren't used but infinite it's a good way to practice on our own.

By Andy Brooks on 10/20/2022

This was a great introduction to learning how to create a headless WordPress build with next.js. I did find the pace quite fast and had to re-listen to most videos several times. Overall though it's excellent and I hope to be using this in a real-world project very soon. I would love to know how to add a video block as well.

Showing all 10 reviews on CourseDuck

Read all 462 reviews on Udemy