Avanti Js Commerce - Panoramica e linee guida

Come sviluppatori, abbiamo questo bisogno inflessibile di seguire le ultime novità in fatto di tecnologia. Siamo guidati da questa sete insaziabile di imparare tutto, assolutamente tutto, su ogni grande e innovativa tecnologia. Desideriamo ardentemente avere uno sguardo esclusivo sul futuro e questo desiderio ci fa andare avanti. La nostra ricerca per l'ultima tecnologia di eCommerce ci ha portato a: Next Commerce.

Next Commerce è l'ultima offerta di BigCommerce in collaborazione con i team Next.js e Vercel. Con Next Commerce, gli sviluppatori di eCommerce possono installare un'applicazione completamente headless integrata con BigCommerce in pochi minuti. È la prima impresa del suo genere sia da Next che da BigCommerce.

Il commercio senza testa è probabilmente l'aspetto del futuro dell'eCommerce. Il commercio senza testa rende facile per gli sviluppatori progettare e sviluppare app innovative, raggiungere un mercato globale più ampio e aiutare il grafico delle vendite del negozio eCommerce a puntare a nord.

Secondo un rapporto sulle prestazioni del sito, in un sondaggio condotto su 120 dirigenti di eCommerce, il 62% era dell'opinione che il commercio senza testa possa migliorare significativamente i tassi di conversione e il coinvolgimento dei clienti.

Siamo entusiasti di mostrarti quanto sia facile da installare e incredibile da usare questa ultima offerta di BigCommerce e Next. Questa guida passo passo è tutto ciò di cui hai bisogno per iniziare su Next Commerce.

Inizieremo con una panoramica.

Una panoramica del prossimo commercio

Next.js è un framework Web open source ampiamente utilizzato con il quale puoi creare le tue applicazioni, sia il rendering lato server che le applicazioni statiche utilizzando React. Attualmente, il framework ci porta Next.js Commerce. È un kit di sviluppo con il quale possiamo costruire siti di eCommerce estremamente performanti, personalizzabili e coinvolgenti. Essendo offerto insieme a una solida piattaforma SaaS aperta come BigCommerce, le possibilità e il potenziale di Next Commerce sono immensi.

Perché il mercato si sta dirigendo verso l'eCommerce senza testa?

Next.js è un potente strumento per costruire il tuo sito di eCommerce. È un'architettura completa e robusta che può essere ridimensionata, personalizzata e configurata per varie implementazioni di eCommerce.

Sebbene Next.js estenda una serie di vantaggi, ecco alcuni dei pochi significativi:

• Rendering del server

  I componenti React possono essere renderizzati lato server prima che l'HTML possa essere inviato ai client.

• Ricarica codice caldo

  Ogni volta che Next.js rileva modifiche, la pagina si ricarica. Qualsiasi URL viene automaticamente indirizzato al filesystem. Ciò non richiede alcuna capacità di configurazione da parte tua. Tuttavia, puoi sempre personalizzare in base alle tue esigenze.

• Compatibilità con gli ecosistemi

  Next.js è altamente compatibile con React, Node e, ovviamente, JavaScript.

• Divisione automatica del codice

  Le pagine vengono fornite solo con le librerie e JavaScript, nient'altro. Invece di generare un unico JavaScript con tutti i codici dell'app, Next.js suddivide effettivamente l'app in varie risorse semplificando l'intero processo.



• Supporto dattiloscritto

  Poiché Next.js è scritto in TypeScript, offre un supporto completo.

• Prelettura

  Un prop di prelettura è supportato dal componente Link che recupera automaticamente le risorse della pagina, anche quelle con sputo di codice automatico.

• Applicazioni ibride

  È possibile utilizzare sia SSR che applicazioni Web statiche in un unico progetto utilizzando Next.js.

• Nessuna configurazione richiesta

  Questo framework pronto per la produzione è perfetto per i team di ingegneri che stanno cercando di offrire scalabilità e facilità d'uso ai negozi di eCommerce. Viene fornito con compilazione automatica e raggruppamento, supporto CSS integrato, routing del filesystem, suddivisione automatica del codice e creazione di API.

Panoramica su come distribuire

Ora dotato di una conoscenza di base di Next Commerce, entriamo rapidamente nei dettagli più succosi: l'implementazione. Cominciamo con i prerequisiti. Next.js non è molto appiccicoso, quindi viene fornito con i requisiti minimi.

Prerequisiti

• Un IDE
• TypeScript al posto di JavaScript
• Un know-how di base delle API BigCommerce
• Directory per /pages e /public. La directory per /pages avrà un _app.tsx e index.tsx
• La directory per /public avrà media che possono essere serviti in modo statico.
• Inoltre, le /pages avranno anche le pagine del negozio eCommerce con i loro percorsi.
• Qualsiasi provider Git, che si tratti di Bitbucket, GitHub o GitLab.
• NPM

Questi sono i requisiti di base per la tua funzionalità Next Commerce. È sempre possibile riorganizzare il resto delle directory in un secondo momento.

Pacchetti e configurazione

Oltre a NPM e Yarn, l'esecuzione di Next Commerce utilizza i file .env e .config per iniziare.

Affinché l'applicazione funzioni correttamente, è necessario utilizzare il pacchetto BigCommerce Storefront Data Hooks. I ganci possono essere riutilizzati in base alle esigenze dei componenti. Puoi trovare i componenti nella directory /components e questi vengono visualizzati in pagine. Il collegamento dagli hook ai componenti e alle pagine richiede grandi quantità di dati dalla vetrina. Se non vuoi spendere una fortuna per i costi degli sviluppatori, puoi facilmente utilizzare il pacchetto BigCommerce Storefront Data Hooks a tuo vantaggio.

Questo pacchetto ti aiuta ad accedere a categorie, dati cruciali sui clienti, pagine di prodotti, dettagli e molto altro. Dopo aver installato correttamente il pacchetto, puoi collegare le tue variabili .env alla coppia chiave-valore appropriata nella vetrina di BigCommerce.

I file .env vengono automaticamente archiviati in Vercel. Puoi facilmente estrarre il file .env usando il comando "vercel env pull". Ora puoi impostare le chiavi API della vetrina di BigCommerce e il token GraphQL utilizzando il file .env.local.

Il passaggio successivo è la configurazione dei file .config. tsconfig.json ti consente di compilare JavaScript per il tuo progetto e next.config.js è il modulo del nodo. Molti sviluppatori se ne fregano, ma è altamente raccomandato se stai cercando di ottenere una funzionalità specifica.

Esecuzione del progetto

L'esecuzione del progetto nel server dell'ambiente di sviluppo è piuttosto semplice. Tutto quello che devi fare è usare il seguente comando:

yarn dev o npm run dev

Distribuzione

Anche la creazione di Next.js Commerce è abbastanza semplice: visita nextjs.org/commerce e fai clic sul pulsante Clona e distribuisci. Alla fine, dovresti essere in grado di avere la tua applicazione attiva e funzionante su Vercel, con il logo del tuo negozio. Una volta distribuito, puoi personalizzare il tuo negozio in base alle tue esigenze.

Faremo il processo di integrazione un passo alla volta.

Passo 1:

Dopo aver premuto il pulsante Clona e distribuisci, puoi iniziare a distribuire utilizzando Vercel con un provider Git.

Se hai un account Vercel, puoi accedere utilizzando le tue credenziali.

Se non disponi di un account Vercel, ti verrà chiesto di creare un account utilizzando uno dei provider Git di tua scelta.

Passo 2:

Dopo aver effettuato l'accesso all'account Vercel, sarai in grado di vedere una finestra di dialogo Clone Git Repository con un elenco a discesa. Seleziona il tuo account Vercel e digita il nome del tuo progetto nel campo fornito e premi Continua.

Passaggio 3:

Il passaggio successivo è installare le integrazioni. Per collegare il tuo negozio BigCommerce al tuo progetto Vercel, premi il pulsante Installa. Dopo aver premuto il pulsante Installa, dovresti vedere un Aggiungi BigCommerce alla schermata del tuo progetto Vercel.

Passaggio 4:

Se hai già un negozio BigCommerce, puoi semplicemente accedere utilizzando le tue credenziali esistenti per integrare Vercel e BigCommerce. Tuttavia, se non conosci BigCommerce, fai clic su Iscriviti.

La pagina di registrazione ti guiderà attraverso la creazione di una sandbox per sviluppatori utilizzando un semplice modulo. Inserisci i tuoi dati e accetta tutti i termini e le condizioni per la registrazione. Fai clic su Continua quando vedi un segno di spunta blu accanto alla scheda di integrazione di BigCommerce.

Passaggio 5:

Ora puoi creare il repository Git digitando il nome del tuo repository. Fare clic su Continua.

Passaggio 6:

Una volta raggiunta la schermata Importa progetto, dovresti essere in grado di confermare le impostazioni del progetto e fare clic su Distribuisci. L'intera distribuzione non dovrebbe richiedere più di pochi minuti.

Una volta completata la distribuzione in Vercel, sarai in grado di vedere un'immagine in miniatura del tuo sito distribuito.

Congratulazioni, il tuo progetto è stato implementato con successo!

Reagisci + Next.js

Puoi configurare il tuo negozio eCommerce con Next - Generatore di SSR per React - e quindi distribuire su Vercel. Utilizzando Crystallize e Next.js boilerplate, puoi facilmente creare una vetrina eCommerce per lo sviluppo web Jamstack. Ora utilizzeremo Crystallize CLI per sviluppare un nuovo progetto.

Digita il seguente comando nel tuo terminale.

npx @cristallizza/cli

Con questo comando, sarai in grado di aggiungere il tuo boilerplate preferito, scegliere di andare con il tuo tenant o scegliere un tenant demo e aggiungere l'API di servizio.

Per eseguire la distribuzione su Vercel, avrai bisogno di questi requisiti di base installati sul tuo computer.

• Vercel CLI
• Un fornitore Git
• Almeno, la versione 10 Node.js
• Un inquilino iscrivendosi a Crystallize

Eseguire il progetto nel server di sviluppo utilizzando:

yarn dev o npm run dev

Con questo, puoi accedere al sito di sviluppo, comprendere la struttura dell'app e modificare le pagine secondo le tue esigenze.

Una volta che hai finito con la creazione di pagine per varie forme di oggetti, puoi iniziare a distribuire in Vercel.

Ancora una volta, per distribuire il tuo progetto su Vercel, dovrai completare l'integrazione con Vercel Github. Tuttavia, puoi anche distribuire manualmente altrettanto facilmente. Utilizzare la riga di comando per digitare in - vercel login - impostare le due variabili di ambiente utilizzando il dashboard di Vercel.

La distribuzione del tuo progetto con Vercel richiede un provider Git. Invia il tuo progetto al provider Git e hai quasi finito: la distribuzione verrà avviata.

Avvolgendo

L'era dell'e-commerce senza testa è qui. Lo sviluppo del sito di eCommerce tradizionale era incentrato sull'offerta di un'esperienza completa con un front-end e un back-end ben integrati. Ciò ha aiutato i negozi a lanciare rapidamente le loro applicazioni. Tuttavia, presto sperimenterai un singhiozzo delle prestazioni e, soprattutto, non sarai in grado di ridimensionare quanto desideri. Ma con l'eCommerce senza testa, non devi lottare così tanto.

Un design senza testa ti dà molta libertà di progettare il tuo front-end da zero o di utilizzarne uno pre-costruito. Avrai la capacità di rispondere rapidamente ai cambiamenti del mercato e personalizzare di conseguenza le esperienze dei clienti. La cosa più importante di tutte: puoi apportare modifiche al tuo front-end senza manomettere il tuo back-end. Ora sai perché, come sviluppatori, siamo certi che il futuro dell'eCommerce è sicuramente senza testa.