Următorul Js Commerce - O prezentare generală și linii directoare

În calitate de dezvoltatori, avem această nevoie neclintită de a urmări cele mai noi tehnologii. Suntem conduși de această sete nesățioasă de a învăța totul, absolut totul, despre fiecare tehnologie mare și inovatoare. Ne dorim să obținem o privire exclusivă asupra viitorului – iar această dorință ne menține în continuare. Căutarea noastră pentru cea mai recentă tehnologie de comerț electronic ne-a condus la – Next Commerce.

Next Commerce este cea mai recentă ofertă de la BigCommerce în colaborare cu echipele Next.js și Vercel. Cu Next Commerce, dezvoltatorii de comerț electronic pot instala o aplicație complet fără cap care este integrată cu BigCommerce în câteva minute. Este primul efort de acest gen atât de la Next, cât și de la BigCommerce.

Comerțul fără cap este probabil ceea ce arată cel mai probabil viitorul comerțului electronic. Comerțul fără cap le permite dezvoltatorilor să proiecteze și să dezvolte aplicații inovatoare, să ajungă la o piață globală mai largă și să ajute graficul de vânzări al magazinului de comerț electronic să indice nord.

Potrivit unui raport privind performanța site-ului, într-un sondaj efectuat pe 120 de directori de comerț electronic, 62% au fost de părere că comerțul fără cap poate îmbunătăți semnificativ ratele de conversie și implicarea clienților.

Suntem încântați să vă arătăm cât de ușor de instalat este și cât de incredibil este să utilizați această nouă ofertă de la BigCommerce și Next. Acest ghid pas cu pas este tot ceea ce aveți nevoie pentru a începe pe Next Commerce.

Vom începe cu o privire de ansamblu.

O prezentare generală a Next Commerce

Next.js este un cadru web open-source utilizat pe scară largă cu ajutorul căruia vă puteți construi propriile aplicații – atât randare pe server, cât și aplicații statice folosind React. În prezent, cadrul ne aduce Next.js Commerce. Este un kit de dezvoltare cu ajutorul căruia putem construi site-uri de comerț electronic extrem de performante, personalizabile și captivante. Fiind oferite împreună cu o platformă SaaS deschisă robustă precum BigCommerce, posibilitățile și potențialul Next Commerce sunt imense.

De ce se îndreaptă piața către comerțul electronic fără cap?

Next.js este un instrument puternic pentru a vă construi site-ul de comerț electronic. Este o arhitectură completă și robustă care poate fi scalată, personalizată și configurată pentru diverse implementări de comerț electronic.

Deși Next.js extinde o serie de beneficii, iată câteva dintre cele câteva semnificative:

• Redare server

  Componentele React pot fi randate pe partea de server înainte ca HTML-ul să poată fi trimis clienților.

• Reîncărcare cod fierbinte

  De fiecare dată când Next.js detectează modificări, pagina se reîncarcă. Orice adresă URL este direcționată automat către sistemul de fișiere. Acest lucru nu necesită abilități de configurare din partea dvs. Cu toate acestea, puteți personaliza întotdeauna în funcție de nevoile dvs.

• Compatibilitatea ecosistemelor

  Next.js este foarte compatibil cu React, Node și, desigur, JavaScript.

• Împărțirea automată a codului

  Paginile vin cu doar bibliotecile și JavaScript - nimic altceva. În loc de a genera un singur JavaScript care are toate codurile de aplicație, Next.js de fapt descompune aplicația în diferite resurse, ușurând întregul proces.



• Suport TypeScript

  Deoarece Next.js este scris în TypeScript, oferă suport complet.

• Preluare

  O prop de preluare anticipată este acceptată de componenta Link, care preia automat resursele paginii – chiar și cele cu scuipat automat de cod.

• Aplicații hibride

  Este posibil să utilizați atât SSR, cât și aplicații web statice într-un singur proiect folosind Next.js.

• Nu este necesară nicio configurație

  Acest cadru pregătit pentru producție este perfect pentru echipele de inginerie care încearcă să ofere scalabilitate și ușurință în utilizare magazinelor de comerț electronic. Vine cu compilare și grupare automată, suport CSS încorporat, rutare a sistemului de fișiere, împărțire automată a codului și crearea API.

Prezentare generală despre cum să implementați

Echipat acum cu o înțelegere de bază a Next Commerce, haideți să intrăm rapid în detaliile mai suculente – implementarea. Să începem cu cerințele preliminare. Next.js nu este foarte lipicios, așa că vine cu cerințele minime stricte.

Cerințe preliminare

• Un IDE
• TypeScript în loc de JavaScript
• Un Know-how de bază al API-urilor BigCommerce
• Director pentru /pages și /public. Directorul pentru /pages va avea un _app.tsx și index.tsx
• Directorul pentru /public va avea suporturi care pot fi servite static.
• În plus, /paginile vor avea și pagini de magazin de comerț electronic cu rutele lor.
• Orice furnizor Git – fie că este Bitbucket, GitHub sau GitLab.
• NPM

Acestea sunt cerințele de bază pentru funcționalitatea dvs. Next Commerce. Puteți oricând să reorganizați restul directoarelor mai târziu.

Pachete și configurație

În plus față de NPM și Yarn, rularea Next Commerce utilizează fișiere .env și .config pentru a începe.

Pentru ca aplicația să funcționeze corect, ar trebui să utilizați pachetul BigCommerce Storefront Data Hooks. Cârligele pot fi refolosite în funcție de nevoile componentelor. Puteți găsi componentele în directorul /components, iar acestea sunt redate în pagini. Legătura de la cârlige la componente și la pagini necesită cantități mari de date din vitrină. Dacă nu doriți să cheltuiți o avere pe costurile dezvoltatorului, puteți utiliza cu ușurință pachetul BigCommerce Storefront Data Hooks în avantajul dvs.

Acest pachet vă ajută să accesați categorii, date cruciale ale clienților, pagini de produse, detalii și multe altele. După ce ați instalat cu succes pachetul, vă puteți conecta variabilele .env la perechea cheie-valoare corespunzătoare din vitrina BigCommerce.

Fișierele .env sunt stocate automat în Vercel. Puteți extrage cu ușurință fișierul .env utilizând comanda „vercel env pull”. Acum puteți seta cheile API pentru vitrina BigCommerce și simbolul GraphQL utilizând fișierul .env.local.

Următorul pas este configurarea fișierelor .config. tsconfig.json vă permite să compilați JavaScript pentru proiectul dvs., iar next.config.js este modulul nod. Mulți dezvoltatori nu-i dau acest lucru, dar este foarte recomandat dacă doriți să obțineți orice funcționalitate specifică.

Derularea Proiectului

Rularea proiectului pe serverul mediului de dezvoltare este destul de simplă. Tot ce trebuie să faci este să folosești următoarea comandă:

yarn dev sau npm run dev

Implementare

Crearea Next.js Commerce este de asemenea destul de ușoară – vizitați nextjs.org/commerce și faceți clic pe butonul Clonează și implementează. Până la sfârșit, ar trebui să poți avea propria ta aplicație pe Vercel – cu logo-ul magazinului tău. Odată ce ați implementat, vă puteți personaliza magazinul în funcție de nevoile dvs.

Vom face procesul de integrare pas la un moment dat.

Pasul 1:

După ce apăsați butonul Clonează și implementați, puteți începe implementarea folosind Vercel cu un furnizor Git.

Dacă aveți un cont Vercel, vă puteți conecta folosind datele de conectare.

Dacă nu aveți un cont Vercel, vi se va solicita să creați un cont folosind oricare dintre furnizorii Git pe care îi alegeți.

Pasul 2:

După ce vă conectați la contul Vercel, veți putea vedea o casetă de dialog Clone Git Repository cu o listă derulantă. Selectați contul dvs. Vercel și introduceți numele proiectului în câmpul furnizat și apăsați Continuare.

Pasul 3:

Următorul pas este instalarea integrărilor. Pentru a vă conecta magazinul BigCommerce la proiectul dvs. Vercel, apăsați butonul Instalare. După ce apăsați butonul Instalare, ar trebui să vedeți un ecran Adăugați BigCommerce pe ecranul proiectului Vercel.

Pasul 4:

Dacă aveți deja un magazin BigCommerce, puteți pur și simplu să vă autentificați folosind acreditările existente pentru a integra Vercel și BigCommerce. Cu toate acestea, dacă sunteți nou la BigCommerce, faceți clic pe Înregistrare.

Pagina Înregistrare vă va ghida prin crearea unui sandbox pentru dezvoltatori folosind un formular simplu. Introduceți detaliile dvs. și acceptați toți termenii și condițiile pentru a vă înscrie. Faceți clic pe Continuați când vedeți o bifă albastră lângă fila de integrare BigCommerce.

Pasul 5:

Acum puteți crea depozitul Git introducând numele depozitului. Faceți clic pe Continuare.

Pasul 6:

După ce ajungeți la ecranul Import Project, ar trebui să puteți confirma setările proiectului și faceți clic pe Deploy. Întreaga implementare nu ar trebui să dureze mai mult de câteva minute.

Odată ce implementarea în Vercel este finalizată, veți putea vedea o imagine în miniatură a site-ului dvs. implementat.

Felicitări, proiectul tău a fost implementat cu succes!

React + Next.js

Puteți să vă configurați magazinul de comerț electronic cu Next - generator SSR pentru React și apoi să îl implementați în Vercel. Folosind Crystallize și Next.js boilerplate, puteți construi cu ușurință o vitrină de comerț electronic pentru dezvoltare web Jamstack. Acum, vom folosi Crystallize CLI pentru a dezvolta un nou proiect.

Introduceți următoarea comandă în terminalul dvs.

npx @crystallize/cli

Cu această comandă, veți putea să adăugați un boilerplate preferat, să alegeți să mergeți cu propriul dvs. chiriaș sau să alegeți un chiriaș demonstrativ și să adăugați Service API.

Pentru a putea implementa în Vercel, veți avea nevoie de aceste cerințe de bază instalate pe computer.

• Vercel CLI
• Un furnizor Git
• Cel puțin, versiunea 10 Node.js
• Un chiriaș prin înscrierea la Crystallize

Rulați proiectul în serverul de dezvoltare folosind:

yarn dev sau npm run dev

Cu aceasta, puteți accesa site-ul de dezvoltare, puteți înțelege structura aplicației și puteți edita paginile conform cerințelor dvs.

După ce ați terminat cu crearea paginilor pentru diferite forme de articole, puteți începe implementarea în Vercel.

Din nou, pentru a vă implementa proiectul în Vercel, va trebui să treceți prin integrarea Vercel Github. Cu toate acestea, puteți implementa și manual la fel de ușor. Utilizați linia de comandă pentru a introduce - vercel login – setați cele două variabile de mediu folosind tabloul de bord Vercel.

Implementarea proiectului cu Vercel are nevoie de un furnizor Git. Împingeți proiectul către furnizorul Git și aproape ați terminat - va fi inițiată implementarea.

Încheierea

Era comerțului electronic fără cap este aici. Dezvoltarea tradițională a site-ului de comerț electronic axată pe oferirea unei experiențe complete cu un front-end și back-end bine îmbinate. Acest lucru a ajutat magazinele să-și lanseze rapid aplicațiile. Cu toate acestea, în curând veți experimenta sughițuri de performanță - cel mai important, nu veți putea să scalați atât de mult pe cât doriți. Dar cu comerțul electronic fără cap, nu trebuie să te lupți atât de mult.

Un design fără cap vă oferă multă libertate de a vă proiecta propriul front-end de la zero sau de a utiliza unul pre-construit. Veți avea capacitatea de a răspunde rapid la schimbările de pe piață și de a personaliza experiențele clienților în consecință. Cel mai important dintre toate - puteți face modificări la front-end-ul dvs. fără a modifica back-end-ul dvs. Acum știți de ce, în calitate de dezvoltatori, suntem siguri că viitorul comerțului electronic este cu siguranță fără cap.