next shopify storefront

? Nächstes Shopify Storefront

Ein Einkaufswagen, der mit TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Shopify Wasserstoff React, ... und Shopify StoreFront GraphQL API erstellt wurde.

Tutorials

• Wie organisiere ich ein nachhaltiges Next.js -Projekt?
• Wie gehe ich mit Typen, die modulare Daten in Next.js abrufen?
• Wie interagiere ich sicher mit GraphQL API in Next.js?
• Wie implementiere ich einen dynamischen Varianten -Selektor für Shopify in Next.js?

Erfahrung

Dies sind meine Erfahrungen, wenn ich an diesem Projekt gearbeitet habe:

• Entwerfen und Bau der Ladenfront von Grund auf neu.
• Erstellen Sie die nächsten Dienstprogramme für modulare Typen, die modulare Daten abrufen.
• Erstellen von Shopify -Versorgungsunternehmen zur Vereinfachung der Variantenauswahl.
• Verwenden von GraphQL Zeus zur Interaktion mit der Storefront -API.
• Verwenden von Shopify -Wasserstoff zur Implementierung von Funktionen für Ladenfront.
• Verwenden von Rückenwind -CSS & Headless UI, um die Schaufensterfront -Benutzeroberfläche zu erstellen.
• Verwenden von Next.js für die inkrementelle statische Regeneration.
• Verwenden der nächsten SEO zur Implementierung der Suchmaschinenoptimierung.
• Verwenden von TypeScript, um React -Hooks und Komponenten sicher zu erstellen.
• Verwenden Sie React Haken, um die Komponentenentwicklung zu beschleunigen.
• Verwenden Sie Swiper, um schöne, berührbare, reaktionsschnelle Schieberegler zu kreieren.
• Mit Eslint folgen Sie den nächsten Practices.

Wenn Ihnen dieses Projekt gefällt, klicken Sie auf den Sternknopf , um es mit einem Lesezeichen zu versehen.

Demonstration

Sie können hier besuchen, um die Demo zu sehen: https://next-shopify-storefront.vercel.app/

Installation

Klonen Sie den Quellcode in Ihren Computer.

git clone https://github.com/maxvien/next-shopify-storefront.git

Installieren Sie die Abhängigkeiten des Projekts.

npm install

Verwendung

Zunächst müssen Sie die folgenden Umgebungsvariablen in der Datei .env oder in Ihren Bereitstellungsplattformen festlegen.

• NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION

Sie können die Shopify StoreFront GraphQL API -Dokumentation befolgen, um die API -Informationen zu StoreFront zu erhalten.

Entwickeln

Entwickeln Sie das Projekt im Entwicklungsmodus.

npm run dev

Bauen

Erstellen Sie das Projekt im Produktionsmodus.

npm run build

Start

Starten Sie das Projekt im Produktionsmodus.

npm run start

Fussel

Analysieren Sie den Code, um Probleme mit eslint und prettier zu finden.

npm run lint

Probleme automatisch beheben.

npm run fix

Visual Studio -Code -Erweiterungen

Um Ihre Produktivität zu beschleunigen, können Sie diese Erweiterungen installieren:

• Eslint
• Hübscher
• Visual Studio Intellicode
• Rückenwind CSS Intellisense
• Postcss -Sprachunterstützung

Verwandte Projekte

• Shopify Data Faker • Ein Shopify -Entwicklungstool zum Generieren von Dummy -Store -Daten.
• Bootstrap Shopify -Thema • Ein kostenloses Shopify -Thema mit Bootstrap, BEM, Liquid, Sass, EsNext, Theme Tools, ... und Webpack.
• Nächste Shopify StoreFront (V2) • Ein Einkaufswagen, der mit TypeScript, Emotion, Next.js, React.js, React -Abfrage, Shopify StoreFront GraphQL API, ... und Material UI erstellt wurde.
• Nächste Shopify StoreFront (V1) • Ein Einkaufswagen, der mit TypeScript, NextJS, React, Redux, Apollo -Client, Shopify StoreFront GraphQL API, ... und Material UI erstellt wurde.

Sterngeschichte