Next JS & WordPress: Build rapid NextJS sites with Next & WP

Course Curriculum

Chapter 1: Introduction & Setup

Lecture 1: Important: Read this before you begin this course! (Github repo etc)

Lecture 2: Course intro & site demo

Lecture 3: Udemy ratings & reviews

Lecture 4: Set up WordPress locally & plugin explanation

Lecture 5: Set up Next JS + first query for WordPress data with GraphQL

Chapter 2: Building the first pages

Lecture 1: Create homepage + query for gutenberg blocks

Lecture 2: Create the BlockRenderer component & clean block data

Lecture 3: Cover component, style with Tailwind CSS, & render images with Next JS Image

Lecture 4: Create a WordPress child theme & modify theme files

Lecture 5: Create heading component, util functions, extend tailwind, and inner block

Lecture 6: Create additional pages & child pages in WordPress & dynamic routes in Next JS

Lecture 7: Query for page data using GraphQL from page components & getStaticProps

Lecture 8: Create Paragraph component & further extend WordPress theme

Lecture 9: Finish Paragraph component & mapping anchor tags / internal links

Chapter 3: Creating the main menu

Lecture 1: Create the Main Menu options page with ACF (part 1)

Lecture 2: Create the Main Menu options page with ACF (part 2)

Lecture 3: Query and clean menu data in Next JS

Lecture 4: Create the Menu component in Next JS

Lecture 5: Finish the Menu component

Lecture 6: Implement the CTA button in Main Menu

Lecture 7: Create ButtonLink component & using the @apply Tailwind CSS directive

Lecture 8: Refactor Page components

Chapter 4: Advanced Gutenberg blocks

Lecture 1: Create the CTA custom block with ACF blocks

Lecture 2: Assign fields to the CTA block and create block preview

Lecture 3: Create the CTA component in Next JS

Lecture 4: Implement columns with Gutenberg blocks

Lecture 5: Rendering Column components within Columns + handling Image blocks in Next JS

Lecture 6: Reusable blocks

Chapter 5: Property pages

Lecture 1: Create custom fields for the property pages

Lecture 2: Create the property pages in Next JS

Lecture 3: Implement post feaured image as Cover background & post title block

Lecture 4: Create the property search custom block

Lecture 5: Create API route for property search

Lecture 6: Rendering property search results

Lecture 7: Create pagination UI

Lecture 8: Handle pagination in search API

Lecture 9: Create the search filters UI

Lecture 10: Query preview & add local state for search filters

Lecture 11: Implement filters in search API

Lecture 12: FIX: URLs when searching

Chapter 6: Extra

Lecture 1: Create formspree form custom gutenberg block

Lecture 2: Create formspree form component in Next JS

Lecture 3: Create property features gutenberg block

Lecture 4: Create property features component in Next JS

Lecture 5: SEO

Lecture 6: Implement the image gallery gutenberg block

Lecture 7: Create the Gallery component in Next JS

Lecture 8: Add background and text color to Column block in WordPress

Lecture 9: Refactor Column component in Next JS to accept background and text color

Lecture 10: Create tick item custom gutenberg block

Lecture 11: Render tick item block in Next (also covering inner blocks within custom blocks)

Lecture 12: Implement background color for a single column

Lecture 13: Push code to github

Chapter 7: Upgrading to Next 13.4 and the app directory

Lecture 1: Prepare the project and update dependencies

Lecture 2: Start implementing the app directory

Lecture 3: Query the homepage, add client components, and fix Link components

Lecture 4: Fix tailwind css and google fonts

Lecture 5: Move the main menu to the layout file

Lecture 6: Implement remaining pages with dynamic routes

Lecture 7: Use generateMetadata for SEO

Lecture 8: Update next/router to next/navigation in PropertySearch

Lecture 9: Implement the search api route handler

Lecture 10: Fix images and fontawesome icons

Lecture 11: Next cache

Chapter 8: Deploy to production

Lecture 1: Deploy WordPress & Next JS app live

Lecture 2: Automatically rebuild when data changes in WordPress (pages directory)

Lecture 3: Clear cache when data changes in WordPress (app directory)

Lecture 4: BONUS!