nextjs woocommerce restapi

? Next.js Woocommerce Rest API

• Reagieren Sie das Woocommerce -Thema unter Verwendung der entkoppelten Architektur in Next.js
• Backend in WordPress
• Frontend in React.
• Daten werden durch REST -API abgerufen.

Merkmale

• Startseite
• Einzelproduktseite mit Galerie -Karussell.
• Wagenseite
• Checkout -Seite mit Stripe Payment Gateway -Integration.
• REST -API -Endpunkte.
• Header und Fußzeile in Next.js, die von WordPress -Menüelementen abrufen.
• WordPress -Widgets werden am nächsten.js Frontend angezeigt.
• Site -Titel, Slogan, Copyright -Text, soziale Links von WordPress.
• Yoast SEO -Unterstützung
• Next.js Bildkomponente, die zur Anforderungszeit eine Bildoptimierung enthält
• Inkrementelle statische (RE)-Erzeugung und automatische Erstellung neuer statischer Produktseiten, ohne als nächstes neu aufbauen zu müssen.
• Unterstützung von Gutenberg Styles
• Blog -Seite mit Pagination
• Einzelposten
• Seiten
• 404 Seite
• Kommentare anzeigen
• Veröffentlichen Sie einen Kommentar (unter Verwendung eines Kommentarformulars)
• Post Vorschau (bald kommt)
• Produktpagination (bald kommt)
• Lasten Sie mehr Produkte (bald kommen)
• Authentifizierung mit JWT und HTTP nur Cookie -Implementierung. (Bald kommen)
• Login -Funktion für die WP -Post -Vorschau in Next.js (in Kürze kommt)

Tutorial -Kurs

Live -Demo -Link

Aufstellen

Erster Klon/Gabel das Repo und die CD hinein.

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

Fügen Sie kopflose Funktionen für WordPress hinzu

• Installieren und aktivieren Sie die folgenden WordPress -Plugins:

• kopflos-cms
• Woocommerce

Konfiguration?

1. (Erforderlich) Erstellen Sie eine .env Datei, die Referenz aus .env-example und aktualisieren Sie Ihre WordPresssites-URL und Frontend Next.js URL.

• NEXT_PUBLIC_WORDPRESS_URL=https://example.com
• NEXT_PUBLIC_SITE_URL=http://localhost.com (Dies ist Ihre Frontend Next.js URL)

2. Fügen Sie Ihren WC_CONSUMER_KEY und WC_CONSUMER_SECRET zum .env hinzu, indem Sie WooCommerce> Einstellungen> Advanced> Rest -API folgen

3. Gehen Sie in Ihrem WordPress -Dashboard zu Einstellungen> Allgemein> Site -Adresse (URL) (setzen Sie diese auf Frontend URL, z. B. http: // localhost: 3000 während der Entwicklung)

4. Erstellen Sie die Header- und Fußzeilenmenüs im WordPress -Dashboard und stellen Sie sie auf das HCMS -Header -Menü bzw. das HCMS -Fußzeilenmenü ein.

Nützliche Links

• Streifen
• Streifen -API -Schlüssel bekommen

Versioning?

Ich benutze Git für die Versionierung.

Autor?

• Imran sagt

Lizenz?

Dieses Projekt ist unter der MIT -Lizenz lizenziert - finden Sie in der lizenz.md -Datei für Details