「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > Next.js を使用して e コマースを構築する

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

2024 年 10 月 31 日公開
ブラウズ:170

Building eCommerce with Next.js

開発者として、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. ログ

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

リリースステートメント この記事は次の場所に転載されています: https://dev.to/aelassas/building-ecommerce-with-nextjs-3aa4?1 侵害がある場合は、[email protected] に連絡して削除してください。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3