nextjs woocommerce restapi

？ next.js woocommerce rest api

• next.jsで分離されたアーキテクチャを使用して、WooCommerceテーマを反応します
• WordPressのバックエンド
• 反応のフロントエンド。
• データはREST APIを介して取得されます。

特徴

• ホームページ
• ギャラリーカルーセル付きの単一製品ページ。
• カートページ
• Stripe Payment Gateway Integrationを備えたチェックアウトページ。
• REST APIエンドポイント。
• next.jsのヘッダーとフッターは、WordPressメニュー項目からフェッチします。
• next.js Frontendに表示されるWordPressウィジェット。
• サイトタイトル、キャッチフレーズ、著作権テキスト、WordPressからソーシャルリンク。
• Yoast SEOサポート
• next.js画像コンポーネントは、リクエスト時に画像の最適化を備えています
• next.jsアプリケーションを再構築することなく、新しい静的製品ページのインクリメンタルな（re）生成と自動作成。
• Gutenberg Stylesのサポート
• ページネーション付きのブログページ
• 単一の投稿
• ページ
• 404ページ
• コメントを表示します
• コメントを投稿する（コメントフォームを使用）
• 投稿プレビュー（近日公開）
• 製品ページネーション（近日公開）
• より多くの製品をロードする（近日公開）
• JWTおよびHTTPのみのクッキー実装による認証。 （ 近日公開 ）
• wpの投稿のログイン機能next.jsのプレビュー（近日公開）

チュートリアルコース

ライブデモリンク

設定

最初にリポジトリとCDをクローン/フォークします。

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

WordPressのヘッドレス機能を追加します

• 次のWordPressプラグインをインストールしてアクティブにします。

• ヘッドレスcms
• woocommerce

構成 ？

1. （必須） .env-exampleから参照を取得する.envファイルを作成し、WordPressSite URLとFrontEnd Next.js URLを更新します。

• NEXT_PUBLIC_WORDPRESS_URL=https://example.com
• NEXT_PUBLIC_SITE_URL=http://localhost.com （これはフロントエンドNext.js urlになります）

2. WOCOMMERCE> SETTINGS> ADVANCED> REST APIをフォローして、 WC_CONSUMER_KEYとWC_CONSUMER_SECRETを.envに追加します

3. WordPressダッシュボードで、[設定]> [一般>サイトアドレス（URL）に移動します（これをフロントエンドURLに設定します。

4. WordPressダッシュボードでヘッダーとフッターメニューを作成し、それぞれHCMSヘッダーメニューとHCMSフッターメニューに設定します。

便利なリンク

• ストライプ
• ストライプAPIキーを取得します

バージョン化？

私はバージョン化にGitを使用します。

著者 ？

• イムランは言った

ライセンス？

このプロジェクトはMITライセンスに基づいてライセンスされています - 詳細については、license.mdファイルを参照してください