Next Js Commerce - Genel Bakış ve Yönergeler

Geliştiriciler olarak, en son teknolojiyi takip etmek için bu sarsılmaz ihtiyacımız var. Her büyük ve yenilikçi teknoloji hakkında her şeyi, kesinlikle her şeyi öğrenmek için bu doyumsuz susuzlukla hareket ediyoruz. Geleceğe özel bir bakış atmak için can atıyoruz - ve bu arzu bizi devam ettiriyor. En son e-Ticaret teknolojisi arayışımız bizi - Next Commerce'e götürdü.

Next Commerce, BigCommerce'in Next.js ve Vercel ekipleriyle işbirliği içinde sunduğu en son tekliftir. Next Commerce ile e-Ticaret geliştiricileri, BigCommerce ile entegre olan tamamen başsız bir uygulamayı birkaç dakika içinde yükleyebilir. Hem Next hem de BigCommerce'den türünün ilk girişimidir.

Başsız ticaret, muhtemelen e-ticaretin geleceğinin büyük olasılıkla nasıl göründüğüdür. Başsız ticaret, geliştiricilerin yenilikçi uygulamalar tasarlamasını ve geliştirmesini, daha geniş bir küresel pazara ulaşmasını ve e-ticaret mağazasının satış grafiğinin kuzeyi göstermesine yardımcı olmasını kolaylaştırır.

Site performansıyla ilgili bir rapora göre, 120 e-Ticaret yöneticisinin katıldığı bir ankette, %62'si başsız ticaretin dönüşüm oranlarını ve müşteri katılımını önemli ölçüde artırabileceği görüşündeydi.

BigCommerce ve Next'in bu en son teklifini kullanmanın ne kadar zahmetsizce kolay olduğunu ve inanılmaz olduğunu size göstermekten heyecan duyuyoruz. Bu adım adım kılavuz, Next Commerce'e başlamak için ihtiyacınız olan her şeyi içerir.

Bir genel bakışla başlayacağız.

Sonraki Ticarete Genel Bir Bakış

Next.js, hem sunucu tarafı işleme hem de React kullanarak statik uygulamalar olmak üzere kendi uygulamalarınızı oluşturabileceğiniz, yaygın olarak kullanılan bir açık kaynaklı web çerçevesidir. Şu anda çerçeve, Next.js Commerce'i bize getiriyor. Son derece yüksek performanslı, özelleştirilebilir ve ilgi çekici e-ticaret siteleri oluşturabileceğimiz bir geliştirici kitidir. BigCommerce gibi sağlam bir açık SaaS platformuyla birlikte sunulan Next Commerce'in olanakları ve potansiyeli çok büyük.

Piyasa Neden Başsız e-Ticaret'e Doğru Gidiyor?

Next.js, e-Ticaret sitenizi oluşturmak için güçlü bir araçtır. Çeşitli e-ticaret uygulamaları için ölçeklenebilen, özelleştirilebilen ve yapılandırılabilen eksiksiz ve sağlam bir mimaridir.

Next.js bir dizi avantaj sunsa da, burada önemli olan birkaç tanesinden bazıları şunlardır:

• Sunucu Oluşturma

  React bileşenleri, HTML istemcilere gönderilmeden önce sunucu tarafında oluşturulabilir.

• Sıcak Kod Yeniden Yükleme

  Next.js değişiklikleri her algıladığında sayfa yeniden yüklenir. Herhangi bir URL otomatik olarak dosya sistemine yönlendirilir. Bu sizden herhangi bir yapılandırma becerisi gerektirmez. Ancak, yine de ihtiyaçlarınıza göre her zaman özelleştirebilirsiniz.

• Ekosistem Uyumluluğu

  Next.js, React, Node ve tabii ki JavaScript ile oldukça uyumludur.

• Kodu Otomatik Olarak Bölme

  Sayfalar yalnızca kitaplıklar ve JavaScript ile gelir - başka bir şey değil. Tüm uygulama kodlarına sahip tek bir JavaScript oluşturmak yerine, Next.js aslında uygulamayı çeşitli kaynaklara bölerek tüm süreci kolaylaştırır.



• TypeScript Desteği

  Next.js TypeScript ile yazıldığından tam destek sunar.

• ön yükleme

  Önceden getirme özelliği, sayfa kaynaklarını otomatik olarak getiren Bağlantı bileşeni tarafından desteklenir - otomatik kod tükürenler bile.

• Hibrit Uygulamalar

  Next.js ile tek bir projede hem SSR hem de statik web uygulamalarından faydalanmak mümkündür.

• Yapılandırma Gerekmiyor

  Bu üretime hazır çerçeve, e-ticaret mağazalarına ölçeklenebilirlik ve kullanım kolaylığı sunmaya çalışan mühendislik ekipleri için mükemmeldir. Otomatik derleme ve paketleme, yerleşik CSS desteği, dosya sistemi yönlendirme, otomatik kod bölme ve API oluşturma ile birlikte gelir.

Nasıl Dağıtılacağına Genel Bakış

Şimdi temel bir Next Commerce anlayışıyla donatılmış olarak, hızlı bir şekilde daha ilginç ayrıntılara, dağıtıma geçelim. Önkoşullarla başlayalım. Next.js çok yapışkan değildir, bu nedenle minimum gereksinimlerle birlikte gelir.

Önkoşullar

• bir IDE
• JavaScript yerine TypeScript
• BigCommerce API'leri hakkında temel bilgiler
• /pages ve /public için dizin. /pages dizininde bir _app.tsx ve index.tsx bulunur
• /public dizini, statik olarak sunulabilecek medyaya sahip olacaktır.
• Ek olarak, /pages, rotalarıyla birlikte e-Ticaret mağaza sayfalarına da sahip olacaktır.
• Herhangi bir Git sağlayıcısı – Bitbucket, GitHub veya GitLab olsun.
• NPM

Bunlar, Next Commerce işlevselliğiniz için temel gereksinimlerdir. Daha sonra dizinlerin geri kalanını her zaman yeniden düzenleyebilirsiniz.

Paketler ve Yapılandırma

NPM ve Yarn'a ek olarak, Next Commerce çalıştırması, başlamak için .env ve .config dosyalarını kullanır.

Uygulamanın düzgün çalışması için BigCommerce Storefront Data Hooks paketini kullanmanız gerekir. Kancalar, bileşen ihtiyaçlarına göre yeniden kullanılabilir. Bileşenleri /bileşenler dizininde bulabilirsiniz ve bunlar sayfalara dönüştürülür. Kancalardan bileşenlere ve sayfalara bağlantı, vitrinden büyük miktarda veriye ihtiyaç duyar. Geliştirici maliyetlerine bir servet harcamak istemiyorsanız, BigCommerce Storefront Data Hooks paketinden kolayca yararlanabilirsiniz.

Bu paket, kategorilere, önemli müşteri verilerine, ürün sayfalarına, ayrıntılara ve çok daha fazlasına erişmenize yardımcı olur. Paketi başarıyla yükledikten sonra, .env değişkenlerinizi BigCommerce vitrinindeki uygun anahtar/değer çiftine bağlayabilirsiniz.

.env dosyaları otomatik olarak Vercel'de saklanır. .env dosyasını “vercel env pull” komutunu kullanarak kolayca çekebilirsiniz. Artık .env.local dosyasını kullanarak BigCommerce vitrin API anahtarlarınızı ve GraphQL belirtecinizi ayarlayabilirsiniz.

Sonraki adım, .config dosyaları yapılandırmasıdır. tsconfig.json, projeniz için JavaScript'i derlemenize izin verir ve next.config.js, düğüm modülüdür. Birçok geliştirici bunu kaçırır, ancak herhangi bir belirli işlevsellik elde etmek istiyorsanız şiddetle tavsiye edilir.

Projeyi Çalıştırmak

Projeyi geliştirme ortamı sunucusunda çalıştırmak oldukça basittir. Tek yapmanız gereken aşağıdaki komutu kullanmak:

iplik dev veya npm çalıştırma dev

dağıtım

Next.js Commerce'i oluşturmak da oldukça kolaydır – nextjs.org/commerce adresini ziyaret edin ve Klonla ve Dağıt düğmesini tıklayın. Sonunda, kendi uygulamanızın Vercel'de - mağazanızın logosuyla - çalışır durumda olmasını sağlayabilirsiniz. Dağıttıktan sonra, mağazanızı ihtiyaçlarınıza göre özelleştirebilirsiniz.

Entegrasyon sürecini adım adım ele alacağız.

Aşama 1:

Klonla ve Dağıt düğmesine bastığınızda, bir Git sağlayıcısı ile Vercel'i kullanarak dağıtmaya başlayabilirsiniz.

Vercel hesabınız varsa, kimlik bilgilerinizi kullanarak giriş yapabilirsiniz.

Vercel hesabınız yoksa, seçtiğiniz Git sağlayıcılarından herhangi birini kullanarak bir hesap oluşturmanız istenir.

Adım 2:

Vercel hesabına giriş yaptıktan sonra, açılır listeli bir Klon Git Deposu iletişim kutusu görebileceksiniz. Vercel hesabınızı seçin ve sağlanan alana proje adınızı yazın ve Devam'a basın.

Aşama 3:

Bir sonraki adım entegrasyonları kurmaktır. BigCommerce mağazanızı Vercel projenize bağlamak için Yükle düğmesine basın. Yükle düğmesine bastığınızda, Vercel Proje ekranınıza bir BigCommerce Ekleme görmelisiniz.

4. Adım:

Zaten bir BigCommerce mağazanız varsa, Vercel ve BigCommerce'i entegre etmek için mevcut kimlik bilgilerinizi kullanarak Oturum Açabilirsiniz. Ancak, BigCommerce'te yeniyseniz, Kaydol'a tıklarsınız.

Kaydol sayfası, basit bir form kullanarak bir geliştirici sanal alanı oluşturmanız konusunda size rehberlik edecektir. Bilgilerinizi girin ve kaydolmak için tüm hüküm ve koşulları kabul edin. BigCommerce entegrasyon sekmesinin yanında mavi bir onay işareti gördüğünüzde Devam'ı tıklayın.

Adım 5:

Artık depo adınızı yazarak Git Deposunu oluşturabilirsiniz. Devam'ı tıklayın.

6. Adım:

Projeyi İçe Aktar ekranına geldiğinizde, proje ayarlarınızı onaylayabilmeli ve Dağıt'a tıklamalısınız. Dağıtımın tamamı birkaç dakikadan fazla sürmemelidir.

Vercel'e dağıtım tamamlandığında, dağıtılan sitenizin küçük resmini görebileceksiniz.

Tebrikler, projeniz başarıyla dağıtıldı!

React + Next.js

E-Ticaret mağazanızı Next - React için SSR oluşturucu ile kurabilir ve ardından Vercel'e dağıtabilirsiniz. Crystallize ve Next.js standartlarını kullanarak kolayca bir Jamstack web geliştirme e-Ticaret vitrini oluşturabilirsiniz. Şimdi, yeni bir proje geliştirmek için Crystallize CLI'yi kullanacağız.

Aşağıdaki komutu terminalinize girin.

npx @kristalize/cli

Bu komutla, tercih ettiğiniz ortak plakayı ekleyebilir, kendi kiracınızla gitmeyi seçebilir veya bir demo kiracı seçip Service API'yi ekleyebilirsiniz.

Vercel'e dağıtmak için bilgisayarınızda bu temel gereksinimlerin yüklü olması gerekir.

• Vercel CLI
• Git sağlayıcısı
• En azından Sürüm 10 Node.js
• Crystallize'a kaydolarak Kiracı

Projeyi aşağıdakileri kullanarak geliştirme sunucusunda çalıştırın:

iplik dev veya npm çalıştırma dev

Bununla geliştirme sitesine erişebilir, uygulama yapısını anlayabilir ve sayfaları ihtiyaçlarınıza göre düzenleyebilirsiniz.

Çeşitli öğe şekilleri için sayfa oluşturmayı bitirdikten sonra Vercel'e dağıtmaya başlayabilirsiniz.

Yine, projenizi Vercel'e dağıtmak için Vercel Github entegrasyonundan geçmeniz gerekecek. Ancak, manuel olarak da kolayca dağıtabilirsiniz. In - vercel login yazmak için komut satırını kullanın - Vercel panosunu kullanarak iki ortam değişkenini ayarlayın.

Projenizi Vercel ile dağıtmak için bir Git sağlayıcısı gerekir. Projenizi Git sağlayıcısına gönderin ve neredeyse bitirdiniz - dağıtım başlatılacaktır.

Toplama

Başsız e-Ticaret dönemi burada. Geleneksel e-ticaret sitesi geliştirme, iyi örülmüş bir ön uç ve arka uç ile eksiksiz bir deneyim sunmaya odaklanmıştır. Bu, mağazaların uygulamalarını hızla başlatmasına yardımcı oldu. Ancak, yakında performansta aksaklıklar yaşayacaksınız - en önemlisi, istediğiniz kadar ölçeklendirme yapamayacaksınız. Ancak başsız e-ticaret ile çok fazla mücadele etmenize gerek yok.

Başsız bir tasarım, size sıfırdan kendi ön yüzünüzü tasarlama veya önceden oluşturulmuş bir tane kullanma özgürlüğü verir. Pazardaki değişikliklere hızla yanıt verme ve müşteri deneyimlerini buna göre özelleştirme yeteneğine sahip olacaksınız. Hepsinden önemlisi – arka uçta değişiklik yapmadan ön uçta değişiklik yapabilirsiniz. Artık geliştiriciler olarak neden e-ticaretin geleceğinin kesinlikle kafasız olduğundan eminiz.