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

Contents

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

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

作為前端/React JS 開發人員，增加您的價值並提升您的知識
學習下一個 JS
使用 Next JS（使用 React JS 和 GraphQL）建立一個靜態的、伺服器編譯的、內容驅動的網站
了解如何使用 GraphQL 和 GraphiQL 查詢儲存在 WordPress 中的資料
將 WordPress 設置為建構內容的後端，然後使用 React JS 和 GraphQL 將內容呈現為頁面
使用 Vercel 部署您的 Next JS 靜態網站並在內容更改時重建
了解如何使用 Tailwind CSS 設計 Next JS 應用程式的樣式
了解如何使用 ACF pro 建立自訂的 Gutenberg blocks (塊)
使用 React 上下文和 React Hooks
建立自訂的 React Hooks
使用 Next JS 建立 api 端點

要求

對 React JS 有基本的了解

課程說明

你想提高你的 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）

英文字幕：有

想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

點選這個 Network & Security 課程✨優惠連結✨ ( NT390 起特價中 ) | 新客戶✨ 優惠連結 ✨| Udemy 永久擁有課程 ( 在電腦瀏覽器登入，點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得）
Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
手機上點選優惠連結看到的價格比電腦上看到的貴
＄代表當地貨幣, 如在台灣為 NT
點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現