Next JS & WordPress：使用 Next & WP 建構快速的 NextJS 網站

這門課程教授開發人員如何使用 Next.js 和 Headless WordPress 來建構功能豐富的房地產網站。它涵蓋了使用 GraphQL 查詢儲存在 WordPress 中的資料、使用 Tailwind CSS 設計元件以及使用 Verce l部署網站等主題。建議參與者具有 React JS 的基本瞭解。

在本課程你將跟著講師使用 Next.js 和 WordPress 建立功能齊全的房地產網站 ~Next 2023

從這 8.5 小時的課程，你會學到

提升你的價值，增強你作為前端/React JS 開發人員的知識
學習 Next.js
使用 Next.js（結合 React JS 和 GraphQL）建立靜態的、伺服器端編譯的、內容驅動的網站
學習如何使用 GraphQL 和 GraphiQL 查詢儲存在 WordPress 中的數據
將 WordPress 設定為後端來建立內容，然後使用 React JS 和 GraphQL 將內容渲染為頁面
使用 Vercel 部署你的 Next.js 靜態網站，並在內容變更時自動重建
學習如何使用 Tailwind CSS 為 Next.js 應用程式設定樣式
學習如何使用 ACF Pro 建立自訂 Gutenberg 區塊
使用 React Context 和 React Hooks
建立自訂 React Hooks
使用 Next.js 建立 API 端點

要求

對 React JS 有基本的了解

課程說明

2023 年 9 月更新：本課程使用 Next.js 的 pages 目錄，但新增了一個章節，專門講解如何使用 Next.js 13.4 和 app 目錄，特別是如何將 pages 目錄轉換為 app 目錄。

你想提高你的 React JS 技能並增加你作為前端開發人員的價值嗎？

通過使用 Headless WordPress 後端學習 Next.js 來提升你的 React 技能！我們將在 Next JS 建構的網站使用 React JS 和 GraphQL ，從給定資料集生成和建構靜態頁面。本課程將著眼於將 WordPress 設置為 headless (無頭) CMS，同時使用 NextJS 從 WordPress 資料（例如自訂的貼文類型、頁面、選單、媒體、進階自訂欄位，以及更多！ ) 使用 GraphQL 查詢該資料。

沒錯，我們實際上可以使用 GraphQL 查詢 WordPress 資料！

我們將在本課程中創作一個房地產代理網站，在本地查看 Next JS 和 WordPress 的初始設置和開發，將 Gutenberg 塊映射到 React 組件，建立我們自己的自訂的 Gutenberg 塊，使用 Tailwind CSS 設計這些組件並查詢 WordPress和 Gutenberg 資料與 GraphQL 自動生成我們的靜態頁面。

我們將看看如何使用 GraphiQL 瀏覽器工具透過 GraphQL 查詢 WordPress 資料。我們也會接觸一點 WordPress 程式碼，但不會太多——這裡的主要焦點是 Next JS。一旦我們熟悉並對 NextJS 和 WordPress 開發得心應手，我們將繼續使用 Vercel 設置和部署一個實時運作的網站，每次我們使用 webhooks 在 WordPress 後端更新內容時，就會重新建構我們的靜態網頁。

建議你對 React 有基本的了解。我們將涵蓋 Next.js、WordPress、GraphQL 和 Tailwind CSS 的所有其他內容！

超越競爭對手！

Next.js 建構最快的網站。我們不會在請求時等待生成頁面，而是使用 Next JS 中的靜態生成功能來預構建頁面並將它們提升到全球雲端伺服器（為此我們將使用 Vercel）——不管用戶身在何處，都可立即交付給他們。

無需等待 API 響應
無需等待根據請求的資料渲染組件
沒有加載旋轉器( spinners )！
無需等待伺服器編譯頁面以供瀏覽器存取—這些頁面已經預先編譯，可以立即提供給你的使用者！

目標受眾

希望學習如何使用 Next.js，結合 WordPress、React JS 和 GraphQL，以更有效率的方式建立靜態、內容驅動型網站的 React JS 開發人員。

講師簡介

Tom Phillips 為忙碌的網頁開發人員提供快節奏、資訊密集的課程

Tom 從事 Web 開發人員已經超過十年了。他創建了 WebDevEducation 來提供課程，提供學生增加價值和作為 Web 開發人員蓬勃發展所需的技能。 Tom 的課程是快節奏、資訊密集、以專案為基礎的課程，不會在無用的廢話上浪費時間。為什麼要在你可能無法完成的課程上浪費30 多個小時，當你可以在四分之一的時間內學到完全相同的東西時，在它的末尾有一個功能齊全的託管專案，並有 github 程式碼來證明你的能力有能力從事這項技術嗎？與 Tom 一起學習流行的 Web 開發庫和框架，以在競爭中取得領先！

（TOMPHILL LTD – 09531652）