IIRF Online > Development > Web Development > Next.js > Next JS & WordPress: Build rapid NextJS sites with Next & WP
Next JS & WordPress: Build rapid NextJS sites with Next & WP by Udemy
Next JS & Headless WordPress: Build a fully functioning real estate property website with Next.js & WordPress ~Next 2023
Course Highlights
- 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
Skills you will learn!
Curriculum
5 Topics
Important: Read this before you begin this course! (Github repo etc)
Course intro & site demo
Udemy ratings & reviews
Set up WordPress locally & plugin explanation
Set up Next JS + first query for WordPress data with GraphQL
9 Topics
Create homepage + query for gutenberg blocks
Create the BlockRenderer component & clean block data
Cover component style with Tailwind CSS & render images with Next JS Image
Create a WordPress child theme & modify theme files
Create heading component util functions extend tailwind and inner block
Create additional pages & child pages in WordPress & dynamic routes in Next JS
Query for page data using GraphQL from page components & getStaticProps
Create Paragraph component & further extend WordPress theme
Finish Paragraph component & mapping anchor tags / internal links
8 Topics
Create the Main Menu options page with ACF (part 1)
Create the Main Menu options page with ACF (part 2)
Query and clean menu data in Next JS
Create the Menu component in Next JS
Finish the Menu component
Implement the CTA button in Main Menu
Create ButtonLink component & using the @apply Tailwind CSS directive
Refactor Page components
6 Topics
Create the CTA custom block with ACF blocks
Assign fields to the CTA block and create block preview
Create the CTA component in Next JS
Implement columns with Gutenberg blocks
Rendering Column components within Columns + handling Image blocks in Next JS
Reusable blocks
12 Topics
Create custom fields for the property pages
Create the property pages in Next JS
Implement post feaured image as Cover background & post title block
Create the property search custom block
Create API route for property search
Rendering property search results
Create pagination UI
Handle pagination in search API
Create the search filters UI
Query preview & add local state for search filters
Implement filters in search API
FIX: URLs when searching
13 Topics
Create formspree form custom gutenberg block
Create formspree form component in Next JS
Create property features gutenberg block
Create property features component in Next JS
SEO
Implement the image gallery gutenberg block
Create the Gallery component in Next JS
Add background and text color to Column block in WordPress
Refactor Column component in Next JS to accept background and text color
Create tick item custom gutenberg block
Render tick item block in Next (also covering inner blocks within custom blocks)
Implement background color for a single column
Push code to github
11 Topics
Prepare the project and update dependencies
Start implementing the app directory
Query the homepage add client components and fix Link components
Fix tailwind css and google fonts
Move the main menu to the layout file
Implement remaining pages with dynamic routes
Use generateMetadata for SEO
Update next/router to next/navigation in PropertySearch
Implement the search api route handler
Fix images and fontawesome icons
Next cache
4 Topics
Deploy WordPress & Next JS app live
Automatically rebuild when data changes in WordPress (pages directory)
Clear cache when data changes in WordPress (app directory)
BONUS!
Next JS & WordPress: Build rapid NextJS sites with Next & WP
Related Next.js Courses
Thank You!
Your review has been submitted successfully.