Next Js Commerce — omówienie i wytyczne

Jako programiści mamy tę niezłomną potrzebę podążania za najnowszą technologią. Napędza nas to nienasycone pragnienie uczenia się wszystkiego, absolutnie wszystkiego, o każdej wielkiej i innowacyjnej technologii. Pragniemy uzyskać ekskluzywny wgląd w przyszłość – a to pragnienie nas napędza. Nasze poszukiwanie najnowszej technologii eCommerce doprowadziło nas do – Next Commerce.

Next Commerce to najnowsza oferta BigCommerce we współpracy z zespołami Next.js i Vercel. Dzięki Next Commerce programiści eCommerce mogą w ciągu kilku minut zainstalować całkowicie bezgłową aplikację, która jest zintegrowana z BigCommerce. Jest to pierwsze tego typu przedsięwzięcie zarówno Next, jak i BigCommerce.

Handel bez głowy jest prawdopodobnie tym, jak najprawdopodobniej wygląda przyszłość eCommerce. Handel bez głowy ułatwia programistom projektowanie i tworzenie innowacyjnych aplikacji, docieranie do szerszego rynku globalnego i pomaganie wykresowi sprzedaży sklepu eCommerce na północ.

Według raportu na temat wydajności witryny, w ankiecie przeprowadzonej wśród 120 dyrektorów eCommerce, 62% było zdania, że ​​handel bez głowy może znacznie poprawić współczynniki konwersji i zaangażowanie klientów.

Cieszymy się, że możemy pokazać, jak łatwo zainstalować i jak niewiarygodnie jest korzystać z najnowszej oferty BigCommerce i Next. Ten przewodnik krok po kroku zawiera wszystko, czego potrzebujesz, aby rozpocząć pracę z Next Commerce.

Zaczniemy od przeglądu.

Przegląd następnego handlu

Next.js to szeroko stosowana platforma internetowa typu open source, za pomocą której można tworzyć własne aplikacje – zarówno renderowanie po stronie serwera, jak i aplikacje statyczne za pomocą Reacta. Obecnie framework dostarcza nam Next.js Commerce. Jest to zestaw dla programistów, za pomocą którego możemy budować niezwykle wydajne, konfigurowalne i angażujące witryny eCommerce. Oferowany wraz z solidną otwartą platformą SaaS, taką jak BigCommerce, możliwości i potencjał Next Commerce są ogromne.

Dlaczego rynek zmierza w kierunku bezgłowego handlu elektronicznego?

Next.js to potężne narzędzie do budowania witryny eCommerce. Jest to kompletna i solidna architektura, którą można skalować, dostosowywać i konfigurować pod kątem różnych wdrożeń eCommerce.

Chociaż Next.js zapewnia szereg korzyści, oto kilka z najważniejszych:

• Renderowanie serwera

  Komponenty React mogą być renderowane po stronie serwera przed wysłaniem kodu HTML do klientów.

• Ponowne ładowanie kodu Hot

  Za każdym razem, gdy Next.js wykryje zmiany, strona ładuje się ponownie. Każdy adres URL jest automatycznie kierowany do systemu plików. Nie wymaga to od Ciebie żadnych umiejętności konfiguracyjnych. Jednak zawsze możesz dostosować do swoich potrzeb.

• Zgodność ekosystemów

  Next.js jest wysoce kompatybilny z React, Node i oczywiście JavaScript.

• Automatyczne dzielenie kodu

  Strony zawierają tylko biblioteki i JavaScript – nic więcej. Zamiast generowania pojedynczego kodu JavaScript, który zawiera wszystkie kody aplikacji, Next.js faktycznie dzieli aplikację na różne zasoby, ułatwiając cały proces.



• Obsługa TypeScript

  Ponieważ Next.js jest napisany w TypeScript, oferuje pełne wsparcie.

• Pobieranie wstępne

  Właściwość prefetching jest obsługiwana przez komponent Link, który automatycznie pobiera zasoby strony – nawet te, które automatycznie wypluwają kod.

• Aplikacje hybrydowe

  Możliwe jest wykorzystanie zarówno SSR, jak i statycznych aplikacji internetowych w jednym projekcie przy użyciu Next.js.

• Konfiguracja nie jest wymagana

  Ten gotowy do produkcji framework jest idealny dla zespołów inżynierskich, które starają się oferować skalowalność i łatwość użytkowania sklepom eCommerce. Jest wyposażony w automatyczną kompilację i łączenie, wbudowaną obsługę CSS, routing systemu plików, automatyczne dzielenie kodu i tworzenie API.

Omówienie sposobu wdrażania

Teraz wyposażeni w podstawową wiedzę na temat Next Commerce, szybko przejdźmy do bardziej soczystych szczegółów – wdrożenia. Zacznijmy od warunków wstępnych. Next.js nie jest zbyt czepliwy, więc ma minimalne wymagania.

Warunki wstępne

• IDE
• TypeScript zamiast JavaScript
• Podstawowe know-how BigCommerce API
• Katalog dla /pages i /public. Katalog dla /pages będzie miał _app.tsx i index.tsx
• Katalog dla /public będzie zawierał media, które mogą być udostępniane statycznie.
• Ponadto /pages będą również miały strony sklepu eCommerce z ich trasami.
• Dowolny dostawca Git – czy to Bitbucket, GitHub czy GitLab.
• NPM

Są to podstawowe wymagania dotyczące funkcji Next Commerce. Zawsze możesz później zreorganizować resztę katalogów.

Pakiety i konfiguracja

Oprócz NPM i Yarn, przebieg Next Commerce korzysta z plików .env i .config, aby rozpocząć.

Aby aplikacja działała poprawnie, musisz skorzystać z pakietu BigCommerce Storefront Data Hooks. Haczyki można ponownie wykorzystać zgodnie z potrzebami komponentów. Komponenty można znaleźć w katalogu /components i są one renderowane na stronach. Łącze od podpięć do komponentów i stron wymaga dużej ilości danych ze sklepu. Jeśli nie chcesz wydawać fortuny na koszty programistów, możesz z łatwością skorzystać z pakietu BigCommerce Storefront Data Hooks na swoją korzyść.

Ten pakiet pomaga uzyskać dostęp do kategorii, kluczowych danych klientów, stron produktów, szczegółów i wielu innych. Po pomyślnym zainstalowaniu pakietu możesz połączyć zmienne .env z odpowiednią parą klucz-wartość w witrynie sklepowej BigCommerce.

Pliki .env są automatycznie zapisywane w Vercel. Możesz łatwo pobrać plik .env za pomocą polecenia „vercel env pull”. Możesz teraz ustawić klucze interfejsu API BigCommerce Storefront i token GraphQL za pomocą pliku .env.local.

Następnym krokiem jest konfiguracja plików .config. Tsconfig.json pozwala skompilować JavaScript dla twojego projektu, a next.config.js to moduł węzła. Wielu programistów pomija to, ale jest to wysoce zalecane, jeśli chcesz osiągnąć określoną funkcjonalność.

Prowadzenie projektu

Uruchomienie projektu na serwerze środowiska programistycznego jest dość proste. Wszystko, co musisz zrobić, to użyć następującego polecenia:

dev lub npm run dev

Zastosowanie

Budowanie sklepu Next.js Commerce jest również dość łatwe – odwiedź nextjs.org/commerce i kliknij przycisk Clone and Deploy. Na koniec powinieneś być w stanie mieć własną aplikację działającą na Vercel – z logo Twojego sklepu. Po wdrożeniu możesz dostosować swój sklep do swoich potrzeb.

Proces integracji będziemy przeprowadzać krok po kroku.

Krok 1:

Po naciśnięciu przycisku Clone and Deploy możesz rozpocząć wdrażanie za pomocą programu Vercel z dostawcą Git.

Jeśli masz konto Vercel, możesz zalogować się przy użyciu swoich danych logowania.

Jeśli nie masz konta Vercel, zostaniesz poproszony o utworzenie konta przy użyciu dowolnego z wybranych dostawców Git.

Krok 2:

Po zalogowaniu się na konto Vercel zobaczysz okno dialogowe Clone Git Repository z rozwijaną listą. Wybierz swoje konto Vercel i wpisz nazwę swojego projektu w odpowiednim polu i naciśnij Kontynuuj.

Krok 3:

Następnym krokiem jest zainstalowanie integracji. Aby połączyć swój sklep BigCommerce z projektem Vercel, kliknij przycisk Zainstaluj. Po naciśnięciu przycisku Instaluj powinieneś zobaczyć Dodaj BigCommerce do ekranu projektu Vercel.

Krok 4:

Jeśli masz już sklep BigCommerce, możesz po prostu zalogować się przy użyciu istniejących danych uwierzytelniających, aby zintegrować Vercel i BigCommerce. Jeśli jednak jesteś nowy w BigCommerce, kliknij Zarejestruj się.

Strona rejestracji poprowadzi Cię przez proces tworzenia piaskownicy dla programistów za pomocą prostego formularza. Wprowadź swoje dane i zaakceptuj wszystkie warunki, aby się zarejestrować. Kliknij Kontynuuj, gdy zobaczysz niebieski znacznik wyboru obok karty integracji BigCommerce.

Krok 5:

Teraz możesz utworzyć repozytorium Git, wpisując nazwę swojego repozytorium. Kliknij Kontynuuj.

Krok 6:

Po przejściu do ekranu Importuj projekt powinieneś być w stanie potwierdzić ustawienia projektu i kliknąć Wdróż. Całe wdrożenie nie powinno zająć więcej niż kilka minut.

Po zakończeniu wdrażania w Vercel będzie można zobaczyć miniaturę wdrożonej witryny.

Gratulacje, Twój projekt został pomyślnie wdrożony!

React + Next.js

Możesz skonfigurować swój sklep eCommerce za pomocą Next – generatora SSR dla React – a następnie wdrożyć w Vercel. Korzystając z boilerplate’u Crystallize i Next.js, możesz łatwo zbudować witrynę eCommerce do tworzenia stron internetowych Jamstack. Teraz będziemy używać CLI Crystallize do opracowania nowego projektu.

Wpisz następujące polecenie w terminalu.

npx @krystalizuj/cli

Za pomocą tego polecenia będziesz mógł dodać preferowany schemat, wybrać opcję korzystania z własnej dzierżawy lub wybrać dzierżawę demonstracyjną i dodać interfejs API usługi.

Aby wdrożyć w Vercel, musisz mieć te podstawowe wymagania zainstalowane na swoim komputerze.

• Vercel CLI
• Dostawca Git
• Przynajmniej wersja 10 Node.js
• Najemca rejestrując się w Crystallize

Uruchom projekt na serwerze deweloperskim za pomocą:

dev lub npm run dev

Dzięki temu możesz uzyskać dostęp do witryny programistycznej, zrozumieć strukturę aplikacji i edytować strony zgodnie z własnymi wymaganiami.

Po zakończeniu tworzenia stron dla różnych kształtów elementów możesz rozpocząć wdrażanie w Vercel.

Ponownie, aby wdrożyć projekt w Vercel, musisz przejść przez integrację Vercel Github. Jednak równie łatwo można wdrożyć ręcznie. Użyj wiersza poleceń, aby wpisać - vercel login - ustaw dwie zmienne środowiskowe za pomocą pulpitu nawigacyjnego Vercel.

Wdrażanie projektu z Vercel wymaga dostawcy Git. Prześlij swój projekt do dostawcy Git i prawie gotowe — rozpocznie się wdrażanie.

Zawijanie

Nadeszła era bezgłowego e-commerce. Tradycyjne tworzenie witryn eCommerce koncentrowało się na oferowaniu pełnego doświadczenia z dobrze spójnym front-endem i back-endem. Pomogło to sklepom szybko uruchomić swoje aplikacje. Jednak wkrótce doświadczysz problemów z wydajnością – co najważniejsze, nie będziesz w stanie skalować tak bardzo, jak chcesz. Ale dzięki bezgłowemu eCommerce nie musisz się tak bardzo zmagać.

Bezgłowa konstrukcja daje dużą swobodę w projektowaniu własnego front-endu od podstaw lub korzystania z gotowego. Będziesz mieć możliwość szybkiego reagowania na zmiany na rynku i odpowiedniego dostosowywania doświadczeń klientów. Co najważniejsze – możesz wprowadzać zmiany w swoim front-endzie bez ingerencji w back-end. Teraz już wiesz, dlaczego, jako programiści, jesteśmy pewni, że przyszłość eCommerce jest z pewnością bez głowy.