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许可证获得许可 - 有关详细信息，请参见许可证文件。