Next JS WordPress Build rapid NextJS sites with Next WP

Next JS WordPress Build rapid NextJS sites with Next WP

What you’ll 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

Requirements

Have a basic understanding of React JS

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 responsesNo waiting to render components based on requested dataNo 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!

Overview

Section 1: Introduction & Setup

Lecture 1 Important: Read this before you begin this course

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

Section 2: Building the first pages

Lecture 6 Create homepage + query for gutenberg blocks

Lecture 7 Create the BlockRenderer component & clean block data

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

Lecture 9 Create a WordPress child theme & modify theme files

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

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

Lecture 12 Query for page data using GraphQL from page components & getStaticProps

Lecture 13 Create Paragraph component & further extend WordPress theme

Lecture 14 Finish Paragraph component & mapping anchor tags / internal links

Section 3: Creating the main menu

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

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

Lecture 17 Query and clean menu data in Next JS

Lecture 18 Create the Menu component in Next JS

Lecture 19 Finish the Menu component

Lecture 20 Implement the CTA button in Main Menu

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

Lecture 22 Refactor Page components

Section 4: Advanced Gutenberg blocks

Lecture 23 Create the CTA custom block with ACF blocks

Lecture 24 Assign fields to the CTA block and create block preview

Lecture 25 Create the CTA component in Next JS

Lecture 26 Implement columns with Gutenberg blocks

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

Lecture 28 Reusable blocks

Section 5: Property pages

Lecture 29 Create custom fields for the property pages

Lecture 30 Create the property pages in Next JS

Lecture 31 Implement post feaured image as Cover background & post title block

Lecture 32 Create the property search custom block

Lecture 33 Create API route for property search

Lecture 34 Rendering property search results

Lecture 35 Create pagination UI

Lecture 36 Handle pagination in search API

Lecture 37 Create the search filters UI

Lecture 38 Query preview & add local state for search filters

Lecture 39 Implement filters in search API

Lecture 40 FIX: URLs when searching

Section 6: Extra

Lecture 41 Create formspree form custom gutenberg block

Lecture 42 Create formspree form component in Next JS

Lecture 43 Create property features gutenberg block

Lecture 44 Create property features component in Next JS

Lecture 45 SEO

Lecture 46 Implement the image gallery gutenberg block

Lecture 47 Create the Gallery component in Next JS

Lecture 48 Add background and text color to Column block in WordPress

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

Lecture 50 Create tick item custom gutenberg block

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

Lecture 52 Implement background color for a single column

Lecture 53 Push code to github

Section 7: Upgrading to Next 13.4 and the app directory

Lecture 54 Prepare the project and update dependencies

Lecture 55 Start implementing the app directory

Lecture 56 Query the homepage, add client components, and fix Link components

Lecture 57 Fix tailwind css and google fonts

Lecture 58 Move the main menu to the layout file

Lecture 59 Implement remaining pages with dynamic routes

Lecture 60 Use generateMetadata for SEO

Lecture 61 Update next/router to next/navigation in PropertySearch

Lecture 62 Implement the search api route handler

Lecture 63 Fix images and fontawesome icons

Lecture 64 Next cache

Section 8: Deploy to production

Lecture 65 Deploy WordPress & Next JS app live

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

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

Lecture 68 BONUS!

React JS developers who want to learn a better approach to creating static, content-driven websites with WordPress, React JS, and GraphQL, using Next JS

Course Information:

Udemy | English | 8h 22m | 6.30 GB
Created by: Tom Phillips

You Can See More Courses in the Developer >> Greetings from CourseDown.com