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 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現
報名參加課程

也許你會有興趣
- React 學習地圖
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣!
發表迴響