Suivant Js Commerce - Un aperçu et des directives

En tant que développeurs, nous avons ce besoin inflexible de suivre les dernières technologies. Nous sommes animés par cette soif insatiable d'apprendre tout, absolument tout, sur chaque grande technologie innovante. Nous aspirons à avoir un aperçu exclusif de l'avenir - et ce désir nous fait avancer. Notre quête de la dernière technologie de commerce électronique nous a conduit à – Next Commerce.

Next Commerce est la dernière offre de BigCommerce en collaboration avec les équipes Next.js et Vercel. Avec Next Commerce, les développeurs de commerce électronique peuvent installer une application complètement sans tête qui est intégrée à BigCommerce en quelques minutes. Il s'agit de la première entreprise du genre de Next et de BigCommerce.

Le commerce sans tête est probablement ce à quoi ressemble le futur du commerce électronique. Le commerce sans tête permet aux développeurs de concevoir et de développer facilement des applications innovantes, d'atteindre un marché mondial plus large et d'aider le graphique des ventes du magasin de commerce électronique à pointer vers le nord.

Selon un rapport sur les performances du site, dans une enquête menée auprès de 120 cadres du commerce électronique, 62 % étaient d'avis que le commerce sans tête peut améliorer considérablement les taux de conversion et l'engagement des clients.

Nous sommes ravis de vous montrer à quel point cette dernière offre de BigCommerce et Next est facile à installer et incroyable à utiliser. Ce guide étape par étape contient tout ce dont vous avez besoin pour démarrer sur Next Commerce.

Nous allons commencer par un aperçu.

Un aperçu de Next Commerce

Next.js est un framework Web open source largement utilisé avec lequel vous pouvez créer vos propres applications - à la fois le rendu côté serveur et les applications statiques utilisant React. Actuellement, le framework nous apporte Next.js Commerce. Il s'agit d'un kit de développement à l'aide duquel nous pouvons créer des sites de commerce électronique extrêmement performants, personnalisables et attrayants. Étant offert avec une plate-forme SaaS ouverte robuste comme BigCommerce, les possibilités et le potentiel de Next Commerce sont immenses.

Pourquoi le marché se dirige-t-il vers le commerce électronique sans tête ?

Next.js est un outil puissant pour créer votre site de commerce électronique. Il s'agit d'une architecture complète et robuste qui peut être mise à l'échelle, personnalisée et configurée pour diverses implémentations de commerce électronique.

Bien que Next.js offre un certain nombre d'avantages, voici quelques-uns des plus importants :

• Rendu du serveur

  Les composants React peuvent être rendus côté serveur avant que le code HTML puisse être envoyé aux clients.

• Rechargement de code à chaud

  Chaque fois que Next.js détecte des modifications, la page se recharge. Toute URL est automatiquement routée vers le système de fichiers. Cela ne nécessite aucune compétence de configuration de votre part. Cependant, vous pouvez toujours personnaliser en fonction de vos besoins.

• Compatibilité de l'écosystème

  Next.js est hautement compatible avec React, Node et, bien sûr, JavaScript.

• Fractionnement automatique du code

  Les pages ne contiennent que les bibliothèques et le JavaScript - rien d'autre. Au lieu de générer un seul JavaScript contenant tous les codes d'application, Next.js décompose en fait l'application en diverses ressources, ce qui facilite l'ensemble du processus.



• Prise en charge des scripts dactylographiés

  Étant donné que Next.js est écrit en TypeScript, il offre une prise en charge complète.

• Prélecture

  Un accessoire de prélecture est pris en charge par le composant Link qui récupère automatiquement les ressources de la page, même celles qui crachent automatiquement du code.

• Applications hybrides

  Il est possible d'utiliser à la fois des applications Web SSR et statiques dans un seul projet à l'aide de Next.js.

• Aucune configuration requise

  Ce cadre prêt pour la production est parfait pour les équipes d'ingénierie qui essaient d'offrir évolutivité et facilité d'utilisation aux magasins de commerce électronique. Il est livré avec la compilation et le regroupement automatiques, la prise en charge CSS intégrée, le routage du système de fichiers, le fractionnement automatique du code et la création d'API.

Présentation du déploiement

Maintenant équipé d'une compréhension de base de Next Commerce, entrons rapidement dans les détails les plus juteux - le déploiement. Commençons par les prérequis. Le Next.js n'est pas très collant, il est donc livré avec les exigences minimales.

Conditions préalables

• Un EDI
• TypeScript à la place de JavaScript
• Un savoir-faire de base des API BigCommerce
• Répertoire pour /pages et /public. Le répertoire pour /pages aura un _app.tsx et l'index.tsx
• Le répertoire pour /public aura des médias qui peuvent être servis de manière statique.
• De plus, les /pages auront également des pages de magasin de commerce électronique avec leurs itinéraires.
• N'importe quel fournisseur Git - que ce soit Bitbucket, GitHub ou GitLab.
• MNP

Ce sont les exigences de base pour votre fonctionnalité Next Commerce. Vous pouvez toujours réorganiser le reste des répertoires plus tard.

Forfaits et configuration

En plus du NPM et du fil, l'exécution de Next Commerce utilise les fichiers .env et .config pour démarrer.

Pour que l'application fonctionne correctement, vous devez utiliser le package BigCommerce Storefront Data Hooks. Les crochets peuvent être réutilisés selon les besoins des composants. Vous pouvez trouver les composants dans le répertoire /components, et ceux-ci sont rendus sur des pages. Le lien entre les crochets, les composants et les pages nécessite de grandes quantités de données de la vitrine. Si vous ne voulez pas dépenser une fortune en frais de développement, vous pouvez facilement utiliser le package BigCommerce Storefront Data Hooks à votre avantage.

Ce package vous aide à accéder aux catégories, aux données clients cruciales, aux pages de produits, aux détails et bien plus encore. Une fois que vous avez installé le package avec succès, vous pouvez lier vos variables .env à la paire clé-valeur appropriée dans la vitrine BigCommerce.

Les fichiers .env sont automatiquement stockés dans Vercel. Vous pouvez facilement extraire le fichier .env en utilisant la commande "vercel env pull". Vous pouvez maintenant définir vos clés API de vitrine BigCommerce et votre jeton GraphQL à l'aide du fichier .env.local.

L'étape suivante est la configuration des fichiers .config. Le tsconfig.json vous permet de compiler le JavaScript pour votre projet et le next.config.js est le module de nœud. De nombreux développeurs laissent passer cela, mais cela est fortement recommandé si vous cherchez à obtenir une fonctionnalité spécifique.

Exécution du projet

L'exécution du projet dans le serveur d'environnement de développement est assez simple. Tout ce que vous avez à faire est d'utiliser la commande suivante :

fil dev ou npm run dev

Déploiement

Construire Next.js Commerce est également assez facile - visitez nextjs.org/commerce et cliquez sur le bouton Cloner et déployer. À la fin, vous devriez être en mesure d'avoir votre propre application opérationnelle sur Vercel – avec le logo de votre magasin. Une fois déployé, vous pouvez personnaliser votre boutique en fonction de vos besoins.

Nous prendrons le processus d'intégration une étape à la fois.

Étape 1:

Une fois que vous avez cliqué sur le bouton Cloner et déployer, vous pouvez commencer à déployer en utilisant Vercel avec un fournisseur Git.

Si vous avez un compte Vercel, vous pouvez vous connecter en utilisant vos identifiants.

Si vous n'avez pas de compte Vercel, vous serez invité à créer un compte en utilisant l'un des fournisseurs Git de votre choix.

Étape 2:

Après vous être connecté au compte Vercel, vous pourrez voir une boîte de dialogue Clone Git Repository avec une liste déroulante. Sélectionnez votre compte Vercel et saisissez le nom de votre projet dans le champ prévu à cet effet, puis cliquez sur Continuer.

Étape 3:

L'étape suivante consiste à installer les intégrations. Pour connecter votre boutique BigCommerce à votre projet Vercel, appuyez sur le bouton Installer. Une fois que vous avez cliqué sur le bouton Installer, vous devriez voir un écran Ajouter BigCommerce à votre projet Vercel.

Étape 4:

Si vous avez déjà un magasin BigCommerce, vous pouvez simplement vous connecter en utilisant vos informations d'identification existantes pour intégrer Vercel et BigCommerce. Cependant, si vous êtes nouveau sur BigCommerce, vous cliquez sur S'inscrire.

La page d'inscription vous guidera dans la création d'un bac à sable de développeur à l'aide d'un simple formulaire. Entrez vos coordonnées et acceptez tous les termes et conditions pour vous inscrire. Cliquez sur Continuer lorsque vous voyez une coche bleue à côté de l'onglet d'intégration BigCommerce.

Étape 5 :

Vous pouvez maintenant créer le référentiel Git en saisissant le nom de votre référentiel. Cliquez sur Continuer.

Étape 6 :

Une fois que vous arrivez à l'écran Importer un projet, vous devriez pouvoir confirmer les paramètres de votre projet et cliquer sur Déployer. L'ensemble du déploiement ne devrait pas prendre plus de quelques minutes.

Une fois le déploiement sur Vercel terminé, vous pourrez voir une image miniature de votre site déployé.

Félicitations, votre projet a été déployé avec succès !

Réagir + Suivant.js

Vous pouvez configurer votre boutique de commerce électronique avec Next - Générateur SSR pour React - puis déployer sur Vercel. En utilisant Crystallize et Next.js standard, vous pouvez facilement créer une vitrine de développement Web Jamstack pour le commerce électronique. Maintenant, nous allons utiliser Crystallize CLI pour développer un nouveau projet.

Saisissez la commande suivante dans votre terminal.

npx @cristallize/cli

Avec cette commande, vous pourrez ajouter votre passe-partout préféré, choisir d'aller avec votre propre locataire ou choisir un locataire de démonstration et ajouter l'API de service.

Afin de déployer sur Vercel, vous aurez besoin de ces exigences de base installées sur votre ordinateur.

• CLI de Vercel
• Un fournisseur Git
• Au moins, la version 10 Node.js
• Un locataire en s'inscrivant à Crystallize

Exécutez le projet dans le serveur de développement en utilisant :

fil dev ou npm run dev

Avec cela, vous pouvez accéder au site de développement, comprendre la structure de l'application et modifier les pages selon vos besoins.

Une fois que vous avez terminé de créer des pages pour différentes formes d'articles, vous pouvez commencer le déploiement sur Vercel.

Encore une fois, pour déployer votre projet sur Vercel, vous devrez passer par l'intégration Vercel Github. Cependant, vous pouvez également déployer manuellement tout aussi facilement. Utilisez la ligne de commande pour saisir - vercel login - définissez les deux variables d'environnement à l'aide du tableau de bord Vercel.

Le déploiement de votre projet avec Vercel nécessite un fournisseur Git. Poussez votre projet vers le fournisseur Git et vous avez presque terminé - le déploiement sera lancé.

Emballer

L'ère du commerce électronique sans tête est arrivée. Le développement de sites de commerce électronique traditionnel s'est concentré sur l'offre d'une expérience complète avec un front-end et un back-end bien intégrés. Cela a aidé les magasins à lancer rapidement leurs applications. Cependant, vous rencontrerez bientôt des problèmes de performances - plus important encore, vous ne pourrez pas évoluer autant que vous le souhaitez. Mais avec le commerce électronique sans tête, vous n'avez pas à lutter autant.

Une conception sans tête vous donne beaucoup de liberté pour concevoir votre propre front-end à partir de zéro ou en utiliser un pré-construit. Vous aurez la capacité de réagir rapidement aux changements du marché et de personnaliser l'expérience client en conséquence. Plus important encore, vous pouvez apporter des modifications à votre front-end sans altérer votre back-end. Vous savez maintenant pourquoi, en tant que développeurs, nous sommes certains que l'avenir du commerce électronique est sûrement sans tête.