在無頭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

Next.js WordPress Starter使用GraphQL,因此首先登錄您的WordPress網站並安裝WPGraphQL。如果你冇現有嘅WordPress網站,我有設置一個虛擬項目,您可以在以下位置使用:https://fake-data.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://localhost:3000。

恭喜——你而家喺JAM堆棧上運行咗一個完全無頭嘅WordPress網站,其中包括你所有嘅帖子、頁面同實時搜索!如果你使用嘅係我嘅假數據API,咁您的網站應該類似于此屏幕截图:

[

上運行嘅無頭WordPress安裝嘅數據屏幕截图](https://res.cloudinary.com/practicaldev/image/fetch/s–yL18MnTZ–/c_limit,f_auto,fl_progressive,q_auto% 2Cw_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優化和錯誤管理。因此，在決定採用這種結構之前，確保你有考慮呢啲因素，並準備好投入額外嘅時間進行開發和維護。

博客