Come costruire un e-commerce con Next.js e Snipcart

Negli ultimi anni, gli e-commerce sono diventati sempre più popolari e la domanda riguardo alla costruzione di questa tipologia di siti è aumentata vertiginosamente. Di conseguenza, sono state rilasciate diverse tecnologie per aiutare gli sviluppatori a costruire un e-commerce. Nello specifico, Snipcart è la soluzione perfetta per costruire un e-commerce moderno e sicuro, grazie anche al fatto che può facilmente essere integrato con Next.js. Quindi, costruire un e-commerce con Next.js e Snipcart per vendere i tuoi prodotti o servizi online è semplice e veloce.

Non perdiamo altro tempo e tuffiamoci nel tutorial! 

Next.js è un framework JavaScript costruito sopra Node.js. Il suo obiettivo è permettere il rendering lato server di applicazioni web sviluppate in React. In altre parole, Next.js consente di utilizzare React per costruire un sito proprio come lo faresti in PHP o tecnologie simili.

Uno dei principali vantaggi del rendering lato server è che permette di superare i problemi di SEO tipici delle SPA (Single Page Application) in React. Pertanto, un sito in Next.js sarà orientato alla SEO, il che è fondamentale in un e-commerce in quanto i tuoi clienti devono poter trovare i tuoi prodotti direttamente da Google.

Scopri di più sul perchè Next.js è la tecnologia giusta per la SEO. Inoltre, un sito in Next.js è performante perchè il browser deve solo mostrare le pagine ricevute dal server, senza doverle costruire dinamicamente come in React.

In più, Next.js ha dalla sua la forza di milioni di pacchetti npm. Queste librerie pronte all'uso permettono di raggiungere qualsiasi obiettivo più rapidamente, senza la necessità di dover reinventare la ruota tutte le volte. Ecco perchè Next.js è anche una tecnologia efficiente anche in termini di costi e di tempo di sviluppo.

Snipcart è una piattaforma potente, affidabile e facile da configurare per costruire la feature del carrello di un e-commerce in HTML e JavaScript. Questo potente strumento consente di aggiungere le più comuni funzionalità di e-commerce a qualsiasi sito o applicazione web in pochi minuti. Snipcart dà anche la possibilità di personalizzare l'aspetto del tuo e-commerce tramite delle regole CSS custom. 

Snipcart è dotato anche di un back-office completo e facile da usare, dove è possibile tenere traccia di qualsiasi tipo di dati relativi alle vendite del tuo e-commerce. Questo ne fa una soluzione JavaScript ideale per costruire un e-commerce senza alcuno sforzo.

Vediamo ora di come sviluppare un e-commerce con Snipcart e Next.js.

Prima di iniziare, assicurati di avere Node.js 16+ installato sul tuo pc. Questo è l’unico prerequisito richiesto per il tutorial, che ha come fine ultimo il raggiungimento del seguente obiettivo:

Vuoi imparare come raggiungere questo risultato? Tempo di addentrarci in questo tutorial passo passo e imparare come costruire un sito e-commerce in Next.js con Snipcart!

Create Next App è lo strumento ufficialmente supportato per inizializzare un nuovo progetto Next.js.

Apri il terminale e lancia il comando qui sotto per dare vita al tuo progetto e-commerce in Next.js:

Con un solo comando inizializzerai un progetto Next.js dentro la cartella "ecommerce-demo-nextjs-snipcart", la quale conterrà i seguenti file:

Entra nella cartella del tuo nuovo progetto e lancia l'applicazione Next.js di demo con:

Successivamente, visita "http://localhost:3000/" nel tuo browser, e dovresti vedere la pagina di default di Create Next App qui sotto:

Fantastico! Questo significa che la tua applicazione web in Next.js è perfettamente funzionante. Ora aggiungiamo Snipcart.

È giunto il momento di integrare Snipcart nel tuo progetto Next.js. Se dovessi riscontrare dei problemi nella configurazione di Snipcart o nella sua integrazione nel tuo sito web Next.js, segui la documentazione ufficiale.

Prima di cominciare, è necessario un account Snipcart. Se non ti sei ancora iscritto, puoi creare un account gratuitamente. Altrimenti, loggati nella piattaforma con le tue credenziali Snipcart.

Ora puoi collegare Snipcart al tuo sito web importando i suoi file CSS e JavaScript dalla loro CDN pubblica. Per CSS, aggiungi le seguenti righe di codice nel componente "<Head>" di Next.js che si trova nel file "pages/index.js":

Così è come Next.js supporta l’aggiunta di CSS esterni in una pagina web, che in questo caso è la home del sito. In particolare, la prima riga è necessaria per dire al browser di preconnettersi al sottodominio di CDN di Snipcart per motivi di prestazioni. Nell’ultima riga viene invece importato il file CSS predefinito per dare stile al carrello e-commerce offerto da Snipcart.

Per importare il file JavaScript richiesto da Snipcart per trasformare il tuo sito Next.js in un e-commerce, incolla le righe di codice qui sotto dopo la sezione "footer" del file "pages/index.js":

Nota che devi importare il componente "<Script>" di Next.js con:

Aggiungi questa riga in cima a "pages/index.js", nella sezione delle istruzioni di "import".

Come puoi vedere, il codice include un "<div>" marcato come "hidden". Questo viene utilizzato da Snipcart per gestire il carrello dell’e-commerce. Per fare funzionare tutto, non rimane che specificare la tua chiave delle API di Snipcart lì dentro.

Puoi recuperare la tua chiave dalla dashboard di Snipcart. Loggati nel sito di Snipcart, raggiungi la tua area privata e clicca sulla voce di menù “API KEYS”. Qui potrai vedere la tua chiave per le API, come nell’immagine che segue: 

Sostituisci “<YOUR_SNIPCART_API_KEY>” nel "<div>" marcato come "hidden" con la tua chiave Snipcart, come segue:

Perfetto, Snipcart è stato integrato in Next.js! Il tuo sito disporrà ora di un carrello degli acquisti come ogni e-commerce che si rispetti! Il prossimo passo è aggiungere dei prodotti al tuo e-commerce.

Vediamo ora come implementare un componente React chiamato `Product`, contenente le info di un singolo prodotto in vendita nel tuo e-commerce, e collegarlo a Snipcart.

Puoi costruire questo componente come qui sotto:

Come puoi notare, un prodotto è caratterizzato da un ID, un nome, una immagine, una descrizione e un prezzo. Ricorda che questo è solo un esempio e che i tuoi prodotti potrebbero necessitare di informazioni diverse. 

L’integrazione con Snipcart avviene attraverso gli attributi "data-item-*" presenti nell’elemento HTML "<button>". Questi attributi HTML permettono a Snipcart di aggiungere il prodotto al carrello alla pressione del bottone "Aggiungi al carrello”. Per scoprire come funziona questo meccanismo nel dettaglio, leggi attentamente la guida nella documentazione ufficiale di Snipcart.

Ottimo! Il componente "Product" è tutto ciò che server per implementare un e-commerce in Next.js con Snipcart. Vediamo ora l’e-commerce in azione.

L'unica cosa che rimane da fare è recuperare i dati relativi ai tuoi prodotti e mostrarli nella home page del tuo sito tramite il componente "Product". Aggiorna "pages/index.js" come segue:

Sei ora pronto per testare il tuo e-commerce. Lancia l’applicazione con:

Raggiungi la pagina "http://localhost:3000" nel browser e prova a fare clic sul pulsante "Aggiungi al carrello". Il prodotto selezionato verrà automaticamente aggiunto al carrello da Snipcart.

Ora, i tuoi utenti potranno quindi aggiungere al carrello i prodotti e i servizi offerti dal tuo sito.

L'ultima cosa da fare è integrare un sistema di pagamento, collegando a Snipcart uno dei diversi gateway di pagamento supportati. 

Il tuo sito Next.js è ora un e-commerce! Congratulazioni! 

Allo stesso tempo, nota che l'intero sito di e-commerce si basa sul file "products.json" importato in "pages/index.js". Questo file JSON contiene tutte le informazioni sui prodotti in vendita:

Ogni oggetto JSON contiene i dati richiesti per popolare le props del componente "Product". Come puoi immaginare, tenere tutti i prodotti in un file di questo tipo va bene per un sito demo come quello costruito qui, ma non è applicabile in uno scenario reale.

Per questo motivo, noi di Cantiere Creativo scegliamo un headless CMS avanzato come DatoCMS per la gestione dei contenuti di un e-commerce. Scopriamo di più riguardo a questo!

Come hai imparato qui, costruire un e-commerce con le tecnologie giuste richiede una manciata di minuti. Il problema è sapere quali sono queste tecnologie e come utilizzarle. Cantiere Creativo è un digital partner che ti supporta proprio in questo, aiutandoti a scegliere ed adottare le migliori tecnologie sulla base dell tue esigenze, guidandoti nel processo di trasformazione digitale. 

Per esempio, devi sapere che la vera sfida in un e-commerce è la gestione dei contenuti. È necessario uno strumento che chiunque nel tuo team possa usare per aggiungere, modificare e gestire i prodotti e i servizi in vendita. Inoltre, deve permettere la creazione e distribuzione di contenuti accattivanti per promuovere i tuoi prodotti o costruire landing page modulari.  Questo strumento è un headless CMS come DatoCMS.
  
DatoCMS è una delle tecnologie CMS migliori sul mercato. Puoi facilmente integrarlo nel tuo e-commerce in Next.js e chiamare una API per ottenere i dati dei tuoi prodotti in pochi millisecondi. Gli addetti al marketing o alle vendite, potranno per gestire tutti i contenuti del tuo e-commerce direttamente nella piattaforma user-friendly di DatoCMS. Ecco perchè Cantiere Creativo consiglia DatoCMS.

In questo articolo hai imparato come costruire un sito web di e-commerce in Next.js. Esistono decine di tecnologie, librerie e servizi diversi per rendere questo più semplice e non partire da zero. Solo un digital partner all’avanguardia come Cantiere Creativo può guidarti in questa giungla tecnologica.

Come visto qui, Snipcart è la soluzione perfetta per implementare un e-commerce in Next.js in modo facile e veloce. La vera sfida dietro un e-commerce sta però nel generare e gestire i contenuti relativi ai prodotti e ai servizi in vendita, ma con DatoCMS puoi facilmente superare quell’ostacolo.

Grazie per aver seguito il tutorial! Speriamo che questo articolo ti sia stato utile. Sentiti libero di contattarci qui per qualsiasi domanda, commento o suggerimento.