在無頭 WordPress 中使用 NextJS

前後端分離是一種提高網站效能和團隊協作效率的開發模式。在WordPress中，透過使用例如React.js的前端技術，結合WordPress REST API，可以實現前後端的獨立開發和資料交換。這種方法增強了網站的靈活性和擴展性，但同時也需要注意諸如SEO優化和錯誤管理等挑戰。

傳統的 web 開發中，前端和後端程式碼是緊密結合的。這意味著介面（HTML、CSS）和邏輯（PHP、資料庫操作）是在同一位置處理的。但是，這種方式隨著網站變得更加複雜和內容豐富，它的局限性就顯現出來了。

前後端分離是一種網站開發模式，它將用戶介面和資料分層處理。前端只專注於展示層，即使用者與之互動的部分，而後端則處理數據、邏輯和伺服器操作。二者透過 APIs 進行通信，APIs 是一種允許不同軟體應用之間相互操作的接口。

為什麼要在 WordPress 中實現前後端分離？

性能提升：前端應用可以快速載入，只在需要時從後端取得數據，大大提高了網站的響應速度和用戶體驗。
靈活性：設計和開發團隊可以獨立工作，不會互相干擾。這對於大型專案和團隊來說，是一個巨大的優勢。
擴充性：由於前後端的分離，增加新功能或進行規模擴展變得更加容易。
多平台支援：一套後端系統可以同時服務網站、行動應用、甚至是桌面應用。

如何實現 WordPress 的前後端分離？

選擇合適的前端技術：決定採用什麼技術堆疊對前端開發至關重要。常見的技術選擇包括React.js、Vue.js 等。這些都是現代 JavaScript 框架，可以建立動態、互動式的使用者介面。
使用 WordPress REST API：WordPress 提供了一個強大的 REST API，允許開發者讀取、寫入、修改和刪除網站資料（如文章、頁面、媒體等）。透過使用 REST API，前端應用程式可以透過 HTTP 請求從 WordPress 後端檢索或發送數據。
建立自訂端點：雖然 WordPress REST API 已經提供了大量的端點，但有時您可能需要更特定的功能。在這種情況下，您可以建立自訂端點，這些端點是與您的應用程式邏輯相對應的 API URL。
認證與權限：當涉及到敏感資料或需要使用者登入的功能時，你需要處理認證（使用者的身份）和授權（使用者可以做什麼）。WordPress 提供了幾種認證方法，包括 Cookie 認證、應用密碼和 OAuth。
靜態資源的管理：前後端分離後，前端的靜態資源（如 JavaScript、CSS、圖像檔案等）可以使用 CDN（內容交付網路）來加速載入。
錯誤處理和調試：使用前後端分離架構，特別是涉及 API 時，有效的錯誤處理和調試變得非常重要。確保你的前端應用能夠妥善處理來自後端的錯誤訊息，並使用如 Chrome 開發者工具等工具進行調試。
SEO 優化：前後端分離可能會影響搜尋引擎優化（SEO），因為搜尋引擎可能無法正確抓取完全由 JavaScript 產生的內容。解決這個問題的技術之一是使用 SSR（伺服器端渲染）或預先渲染內容，確保搜尋引擎可以讀取網站內容。

WordPress在全球都超過 13 億個網站使用,它非常適合作為無頭 CMS。NextJS是一個基於 React 建構的框架,可為您提供驚人數量的功能,否則您需要自行設定這些功能(靜態渲染、捆綁、預取等),並提供超快速和高效能的網站。讓我們將兩者結合起來創建一個超快速的無頭 WordPress 網站!

先決條件:

NodeJS和React的基本了解

一個現有的 WordPress 網站,其中包含一些帖子和頁面

我們將在本演練中使用Colby Fayock 的Next.js WordPress Starter (https://github.com/colbyfayock/next-wordpress-starter/)。這個 Next.js WordPress Starter 專案旨在「將 WordPress 作為一個無頭 CMS,並使用 Next.js 創建可以部署在任何地方的靜態體驗。」

Next.js WordPress Starter 專案可讓我們輕鬆提取您通常期望在 WordPress 網站中的所有內容(貼文、頁面、作者列表、全域搜尋),並透過 GraphQL 端點將其引入 NextJS。該項目正在積極開發中,因此請關注 repo 以獲取更多功能更新!

實操入門

WordPress

使用 GraphQL 的 Next.js WordPress 入門版,因此先登入您的 WordPress 網站並安裝WPGraphQL。如果您沒有現有的 WordPress 網站,我已經設定了一個虛擬項目,您可以在以下位置使用:https://假數據.better-wordpress.dev。

Next.js WordPress 啟動器

在前端開始使用 NextJS 的最快方法是開啟終端,導航到要開始工作的資料夾,然後運行:

yarn create next-app -e https://github.com/colbyfayock/next-wordpress-starter

安裝完成後,打開程式碼編輯器並將.env.local檔案加入到專案的根目錄。這是我們要設定環境變數的地方,以便 NextJS 知道從哪裡取得我們的數據。

Starter Project 使用的環境變數是:WORDPRESS_GRAPHQL_ENDPOINT,所以我使用WORDPRESS_GRAPHQL_ENDPOINT="https://fake-data.better-wordpress.dev/graphql"來獲取一些虛擬數據。您也可以在測試時使用這個虛擬 WordPress 數據,但是當您準備好上線時,不要忘記用您自己的 WordPress 端點替換 url!

[](https://res.cloudinary.com/practicaldev/image/fetch/s–yTHzS9ou–/c_limit,f_auto,fl_progressive,q_auto,w_880/https:// /dev-to-uploads.s3.amazonaws.com/uploads/articles/x1uabk6infw3yqhlchrx.jpg)

回到您的終端,運行yarn dev會啟動一個開發伺服器。現在不是查看新 NextJS 網站的效能和捆綁包大小的時候(我在第一次嘗試 NextJS 時犯的一個錯誤),儘管您應該始終確保發布盡可能小的捆綁包大小。我們稍後會談到。

在終端機中運行yarn dev後,現在您可以打開瀏覽器並看到您的 Headless WordPress 網站運行在:http://本機:3000。

恭喜您——您現在在 JAM 堆疊上運行了一個完全無頭的 WordPress 網站,其中包括您所有的帖子、頁面和即時搜尋!如果您使用的是我的假數據 API,那麼您的網站應該類似於此螢幕截圖:

[

上運行的無頭 WordPress 安裝的數據螢幕截圖](https://res.cloudinary.com/practicaldev/image/fetch/s–yL18MnTZ–/c_limit,f_auto,fl_progressive,q_auto,w_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plfscqemyudt0qx2twwr.jpg)

來自在 NextJS 上運行的 Headless WordPress 安裝的資料的螢幕截圖

此時,您可以開始自訂啟動項目,使其外觀和功能完全符合您的要求。完成後,是時候部署您的網站讓全世界看到了!

部署您的 NextJS 網站

在運行生產建置之前,使用您的即時 URL 更新您的package.json文件(不。 3 列)。這是將傳遞到您的網站地圖中的 URL——對於 SEO 非常重要。

[的螢幕截圖](https://res.cloudinary.com/practicaldev/image/fetch/s–GL6yBr2m–/c_limit,f_auto,fl_progressive,q_auto,w_880/https:// dev-to-uploads.s3.amazonaws.com/uploads/articles/5fnd6zc8jxfidnzf9nx2.jpg)

在您的終端中運行yarn build實際上會獲取您的所有帖子和頁面,建立網站地圖和靜態網站的最佳化生產版本,準備部署到您的伺服器。

運行yarn build後,您可以運行yarn start來運行本地伺服器並測試您的本地生產版本。這是查看捆綁包大小和網站速度的最佳時機,因為它很好地代表了您的網站將如何在伺服器上回應。

我使用vercel.com來部署 better-wordpress.dev。 Vercel 是建立 NextJS 的同一團隊,他們有一個慷慨的免費層,所以在那裡部署它是非常有意義的。

我目前正在撰寫部落格文章,解釋如何將 NextJS 部署到 Vercel、Netlify 和其他主機——但同時,Vercel 文件非常棒:https://nextjs.org/docs/deployment

最後的話

您現在擁有一個在 JAM 堆疊上運行的功能齊全且速度極快的網站,在前端使用 NextJS 並為您的資料使用 WordPress。

前後端分離不是全新的概念，但它在 WordPress 生態系統中正變得越來越流行。它提供了無與倫比的靈活性和擴展性，尤其是對於那些需要高效能和多平台支援的複雜項目。然而，它也帶來了自身的挑戰，如 SEO 優化和錯誤管理。因此，在決定採用這種結構之前，確保您已經考慮了這些因素，並準備好投入額外的時間進行開發和維護。

部落格