Heim >Web-Frontend >js-Tutorial >E-Commerce mit Next.js aufbauen

E-Commerce mit Next.js aufbauen

Susan Sarandon
Susan SarandonOriginal
2024-10-19 20:35:30826Durchsuche

Building eCommerce with Next.js

Als Entwickler möchte ich nicht durch eine Shopify-Vorlage eingeschränkt werden, möchte aber auch nicht deren Storefront-API mit einer benutzerdefinierten App verwenden. Ich möchte eine vollständig anpassbare Lösung in der Hand haben, die ich nach meinen Wünschen anpassen kann. Von ui/ux, db, backend, api, authentifizierung, devops und so weiter. Also habe ich eine vollständig anpassbare Lösung mit React, Next.js, MongoDB und Stripe für Zahlungen erstellt.

Demo-Link finden Sie hier: https://wexcommerce.dynv6.net:8002

Und Quellcode hier: https://github.com/aelassas/wexcommerce

Mit der folgenden Lösung können Sie eine vollständig anpassbare, für SEO optimierte E-Commerce-Website mit einem betriebsbereiten Stripe-Zahlungsgateway zu sehr geringen Kosten erstellen, indem Sie sie auf einem Docker-Droplet mit mindestens 1 GB RAM hosten.

Diese Lösung besteht aus einem Frontend und einem Admin-Dashboard. Über das Frontend können Kunden nach den gewünschten Produkten suchen, diese in den Warenkorb legen und zur Kasse gehen. Kunden können sich bei Google, Facebook, Apple oder E-Mail anmelden und mit Kreditkarte, Nachnahme, Überweisung, PayPal, Google Pay, Apple Pay, Link oder anderen Stripe-Zahlungsmethoden bezahlen. Sobald sie eingeloggt sind, können sie auf den Verlauf ihrer Einkäufe zugreifen und ihre Bestellungen verfolgen. Über das Admin-Dashboard können Administratoren Bestellungen, Zahlungen, Produkte, Kategorien, Kunden und allgemeine Einstellungen wie die Standardsprache, die Währung, Lieferung, Versand und akzeptierte Zahlungsmethoden verwalten.

Eine wichtige Designentscheidung wurde aufgrund seiner zahlreichen Vorteile für die Verwendung von TypeScript getroffen. TypeScript bietet starke Typisierung, Tools und Integration, was zu hochwertigem, skalierbarem, besser lesbarem und wartbarem Code führt, der einfach zu debuggen und zu testen ist.

Merkmale

  • Lagerverwaltung
  • Auftragsverwaltung
  • Zahlungsverwaltung
  • Kundenmanagement
  • Mehrere Zahlungsoptionen (Kreditkarte, Nachnahme, Überweisung, PayPal, Google Pay, Apple Pay, Link)
  • Operationelles Stripe-Zahlungsgateway
  • Mehrere Lieferoptionen (Lieferung nach Hause, Abholung im Geschäft)
  • Unterstützung mehrerer Sprachen (Englisch, Französisch)
  • Mehrere Anmeldeoptionen (Google, Facebook, Apple, E-Mail)
  • Responsives Backend und Frontend

Ressourcen

  1. Übersicht
  2. Installation (selbst gehostet)
  3. Installieren (Docker)
    1. Docker-Image
    2. SSL
  4. Stripe einrichten
  5. Von der Quelle ausführen
  6. Demo-Datenbank
    1. Windows, Linux und macOS
    2. Docker
  7. Sprache und Währung ändern
  8. Neue Sprache hinzufügen
  9. Protokolle

Jedes Feedback ist willkommen.

Das obige ist der detaillierte Inhalt vonE-Commerce mit Next.js aufbauen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn