Next.js を使用して e コマースを構築する

開発者として、Shopify テンプレートに制限されることは望ましくありませんが、カスタム アプリでストアフロント API を使用することも望んでいません。必要に応じて調整できる、完全にカスタマイズ可能なソリューションを手元に置きたいと考えています。 ui/ux、db、バックエンド、api、認証、devops などから。そこで、React、Next.js、MongoDB、Stripe を使用して、支払い用に完全にカスタマイズ可能なソリューションを構築しました。

ここでデモリンクを見つけることができます: https://wexcommerce.dynv6.net:8002

ソースコードはこちら: https://github.com/aelassas/wexcommerce

次のソリューションを使用すると、少なくとも 1GB の RAM を備えた Docker ドロップレット上でホストすることで、運用可能な Stripe 支払いゲートウェイを備えた SEO に最適化された完全にカスタマイズ可能な e コマース Web サイトを非常に低コストで構築できます。

このソリューションは、フロントエンドと管理ダッシュボードで構成されています。フロントエンドから、顧客は必要な製品を検索し、カートに追加してチェックアウトできます。顧客は、Google、Facebook、Apple、または電子メールでサインアップし、クレジット カード、代金引換、電信送金、PayPal、Google Pay、Apple Pay、Link、またはその他の Stripe 支払い方法で支払うことができます。ログインすると、購入履歴にアクセスして注文に従うことができます。管理者は、管理者ダッシュボードから、注文、支払い、製品、カテゴリ、顧客、およびデフォルトの言語、通貨、配送、配送、受け入れられる支払い方法などの一般設定を管理できます。

TypeScript には多くの利点があるため、設計上の重要な決定事項として TypeScript を使用することが決定されました。 TypeScript は強力な型指定、ツール、統合を提供し、その結果、デバッグとテストが容易な、高品質でスケーラブルで読みやすく保守しやすいコードが得られます。

特徴

• 在庫管理
• 注文管理
• 支払い管理
• 顧客管理
• 複数の支払いオプション (クレジット カード、代金引換、電信送金、PayPal、Google Pay、Apple Pay、リンク)
• 運用可能な Stripe ペイメント ゲートウェイ
• 複数の配送オプション (宅配、店頭引き取り)
• 多言語サポート (英語、フランス語)
• 複数のログイン オプション (Google、Facebook、Apple、電子メール)
• レスポンシブなバックエンドとフロントエンド

リソース

1. 概要
2. インストール中 (セルフホスト型)
3. インストール(Docker)
   1. Docker イメージ
   2. SSL
4. ストライプのセットアップ
5. ソースから実行
6. デモデータベース
   1. Windows、Linux、macOS
   2. ドッカー
7. 言語と通貨を変更します
8. 新しい言語を追加
9. ログ

フィードバックをお待ちしております。

以上がNext.js を使用して e コマースを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。