next shopify storefront

? Prochaine Shopify Storefront

Un panier construit avec TypeScript, Tailwind CSS, UI sans tête, Next.js, React.js, Shopify Hydrogen React, ... et Shopify Storefront GraphQL API.

Tutoriels

• Comment organiser un projet Next.js durable?
• Comment gérer les données modulaires de type TypeSafe réapproche dans Next.js?
• Comment interagir en toute sécurité avec l'API GraphQL dans Next.js?
• Comment implémenter un sélecteur de variantes dynamiques pour Shopify dans Next.js?

Expérience

Ce sont mes expériences lorsque j'ai travaillé sur ce projet:

• Concevoir et construire la vitrine à partir de zéro.
• Création des prochains utilitaires pour la récupération des données modulaires de type type.
• Création d'utilitaires Shopify pour simplifier la sélection des variantes.
• Utilisation de GraphQL Zeus pour interagir avec l'API de devanture.
• Utilisation de Shopify Hydrogène pour implémenter les fonctionnalités des devantures.
• Utilisation de CSS et de l'interface utilisateur sans tête pour construire l'interface utilisateur de la devanture.
• Utilisation de Next.js pour la régénération statique incrémentielle.
• Utilisation du référencement suivant pour implémenter l'optimisation des moteurs de recherche.
• Utilisation de TypeScript pour créer des crochets React en toute sécurité et des composants.
• Utilisation de React Use Hooks pour accélérer le développement des composants.
• Utilisation de Swiper pour créer de beaux curseurs touchables et réactifs.
• Utilisation d'Eslint, plus jolie pour suivre les meilleures pratiques.

Si vous aimez ce projet, appuyez sur le bouton étoile pour le mettre en signet ️

Démonstration

Vous pouvez visiter ici pour voir la démo: https://next-shopify-storefront.vercel.app/

Installation

Clone le code source dans votre ordinateur.

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

Installez les dépendances du projet.

npm install

Usage

Tout d'abord, vous devez définir les variables d'environnement ci-dessous dans le fichier .env ou vos plates-formes de déploiement.

• NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION

Vous pouvez suivre la documentation de l'API Shopify Storefront GraphQL pour obtenir des informations API Storefront.

Développer

Développer le projet en mode développement.

npm run dev

Construire

Construisez le projet en mode de production.

npm run build

Commencer

Démarrez le projet en mode de production.

npm run start

Peluche

Analysez le code pour trouver des problèmes avec eslint et prettier .

npm run lint

Résoudre automatiquement les problèmes.

npm run fix

Extensions de code Visual Studio

Pour accélérer votre productivité, vous pouvez installer ces extensions:

• Eslint
• Plus joli
• Visual Studio Intellicocode
• Tailwind CSS Intellisense
• Support de langue postcss

Projets connexes

• Shopify Data Faker • Un outil de développement Shopify pour générer des données de magasin factice.
• Bootstrap shopify thème • Un thème Shopify gratuit construit avec bootstrap, bem, liquide, sass, esnext, outils à thème, ... et webpack.
• Suivant Shopify Storefront (V2) • Un panier construit avec TypeScript, Emotion, Next.js, React.js, React Query, Shopify Storefront GraphQL API, ... et MATÉRIEL UI.
• Next Shopify Storefront (V1) • Un panier construit avec TypeScript, NextJS, React, Redux, Client Apollo, API Shopify Storefront GraphQL, ... et UI Material.

Histoire des étoiles