„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > E-Commerce mit Next.js aufbauen

E-Commerce mit Next.js aufbauen

Veröffentlicht am 31.10.2024
Durchsuche:284

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)
  • Betriebliches 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. Überblick
  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.

Freigabeerklärung Dieser Artikel ist abgedruckt unter: https://dev.to/aelassas/building-ecommerce-with-nextjs-3aa4?1 Bei Verstößen wenden Sie sich bitte an [email protected], um ihn zu löschen
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3