nextjs woocommerce restapi

？ next.js woocommerce rest api

• React WooCommerce主題，使用Next.js中的脫鉤體系結構
• 在WordPress中的後端
• 反應的前端。
• 數據通過REST API獲取。

特徵

• 主頁
• 帶畫廊旋轉木馬的單產品頁面。
• 購物車頁面
• 與Stripe支付網關集成的結帳頁面。
• REST API端點。
• Next.js中的標題和頁腳從WordPress菜單項獲取。
• Next.js Frontend上顯示的WordPress小部件。
• 站點標題，標語，版權文本，來自WordPress的社交鏈接。
• Yoast SEO支持
• Next.js圖像組件，在請求時具有圖像優化
• 增量靜態（RE）生成和自動創建新的靜態產品頁面，而無需重新構建Next.js應用程序。
• Gutenberg樣式支持
• 分頁的博客頁面
• 單個帖子
• 頁面
• 404頁
• 顯示評論
• 發表評論（使用評論表）
• 郵政預覽（即將推出）
• 產品分頁（即將推出）
• 加載更多產品（即將推出）
• 僅使用JWT和HTTP的Cookie實現身份驗證。 （ 即將推出 ）
• Next.js中的WP Post Preview的登錄功能（即將推出）

教程課程

實時演示鏈接

設定

首先克隆/分叉回購和CD。

git clone https://github.com/imranhsayed/nextjs-woocommerce-restapi.git
cd nextjs-woocommerce-restapi
npm ci
npm run dev

為WordPress添加無頭功能

• 安裝和激活WordPress插件：

• 無頭CM
• WooCommerce

配置 ？

1. （必需）創建一個.env文件從.env-example中獲取引用，然後更新WordPresssite URL和Frontend Next.js URL。

• NEXT_PUBLIC_WORDPRESS_URL=https://example.com
• NEXT_PUBLIC_SITE_URL=http://localhost.com （這將是您的前端next.js url）

2. 通過關注WooCommerce>“設置”>“高級> REST API”，將WC_CONSUMER_KEY和WC_CONSUMER_SECRET添加到.env中

3. 在您的WordPress儀表板中，轉到設置>常規>站點地址（url）（將其設置為前端URL，例如http：// localhost：3000在開發過程中）

4. 在WordPress儀表板中創建標題和頁腳菜單，並將它們分別設置為HCMS標題菜單和HCMS頁腳菜單。

有用的鏈接

• 條紋
• 獲取條紋API鍵

版本控制？

我使用git進行版本控制。

作者 ？

• 伊姆蘭說

執照 ？

該項目已根據MIT許可證獲得許可 - 有關詳細信息，請參見許可證文件。