Next Js Commerce - Gambaran Umum dan Pedoman

Sebagai pengembang, kami memiliki kebutuhan yang kuat untuk mengikuti teknologi terbaru. Kami didorong oleh rasa haus yang tak terpuaskan ini untuk mempelajari segalanya, benar-benar segalanya, tentang setiap teknologi besar dan inovatif. Kami mendambakan untuk mendapatkan pandangan eksklusif tentang masa depan – dan keinginan ini membuat kami terus maju. Pencarian kami untuk teknologi eCommerce terbaru membawa kami ke – Next Commerce.

Next Commerce adalah penawaran terbaru dari BigCommerce bekerja sama dengan tim Next.js dan Vercel. Dengan Next Commerce, pengembang eCommerce dapat menginstal aplikasi tanpa kepala yang terintegrasi dengan BigCommerce dalam hitungan menit. Ini adalah upaya pertama dari jenisnya dari Next dan BigCommerce.

Perdagangan tanpa kepala mungkin seperti apa masa depan eCommerce yang paling mungkin terlihat. Perdagangan tanpa kepala memudahkan pengembang untuk merancang dan mengembangkan aplikasi inovatif, menjangkau pasar global yang lebih luas, dan membantu grafik penjualan toko eCommerce mengarah ke utara.

Menurut laporan kinerja situs, dalam survei terhadap 120 eksekutif eCommerce, 62% berpendapat bahwa perdagangan tanpa kepala dapat meningkatkan tingkat konversi dan keterlibatan pelanggan secara signifikan.

Kami sangat senang menunjukkan kepada Anda betapa mudahnya memasang dan luar biasa menggunakan penawaran terbaru dari BigCommerce dan Berikutnya ini. Panduan langkah demi langkah ini adalah semua yang Anda butuhkan untuk memulai Perdagangan Berikutnya.

Kita akan mulai dengan gambaran umum.

Gambaran Umum Perdagangan Berikutnya

Next.js adalah kerangka kerja web sumber terbuka yang banyak digunakan yang dengannya Anda dapat membangun aplikasi Anda sendiri – baik rendering sisi server maupun aplikasi statis menggunakan React. Saat ini, framework menghadirkan Next.js Commerce kepada kami. Ini adalah kit pengembang yang dengannya kami dapat membangun situs eCommerce yang berkinerja sangat tinggi, dapat disesuaikan, dan menarik. Ditawarkan bersama dengan platform SaaS terbuka yang kuat seperti BigCommerce, kemungkinan dan potensi Next Commerce sangat besar.

Mengapa Pasar Menuju Headless eCommerce?

Next.js adalah alat yang ampuh untuk membangun situs eCommerce Anda. Ini adalah arsitektur yang lengkap dan kuat yang dapat diskalakan, disesuaikan, dan dikonfigurasi untuk berbagai implementasi eCommerce.

Meskipun Next.js memberikan sejumlah manfaat, berikut adalah beberapa di antaranya:

• Rendering Server

  Komponen React dapat dirender di sisi server sebelum HTML dapat dikirim ke klien.

• Pemuatan Ulang Kode Panas

  Setiap kali Next.js mendeteksi perubahan, halaman akan dimuat ulang. URL apa pun secara otomatis dirutekan ke sistem file. Ini tidak memerlukan keterampilan konfigurasi apa pun dari Anda. Namun, Anda selalu dapat menyesuaikan sesuai dengan kebutuhan Anda.

• Kompatibilitas Ekosistem

  Next.js sangat kompatibel dengan React, Node dan, tentu saja, JavaScript.

• Memisahkan Kode Secara Otomatis

  Halaman hanya datang dengan perpustakaan dan JavaScript – tidak banyak yang lain. Di tempat menghasilkan satu JavaScript yang memiliki semua kode aplikasi, Next.js sebenarnya memecah aplikasi menjadi berbagai sumber yang membuat seluruh proses lebih mudah.



• Dukungan TypeScript

  Karena Next.js ditulis dalam TypeScript, ia menawarkan dukungan lengkap.

• Mengambil terlebih dahulu

  Sebuah prop prefetching didukung oleh komponen Link yang secara otomatis mengambil sumber daya halaman – bahkan yang meludah kode otomatis.

• Aplikasi Hibrida

  Dimungkinkan untuk menggunakan SSR dan aplikasi web statis dalam satu proyek menggunakan Next.js.

• Tidak Perlu Konfigurasi

  Kerangka kerja siap produksi ini sangat cocok untuk tim teknik yang mencoba menawarkan skalabilitas dan kemudahan penggunaan ke toko eCommerce. Muncul dengan kompilasi dan bundling otomatis, dukungan CSS bawaan, perutean sistem file, pemisahan kode otomatis, dan pembuatan API.

Ikhtisar tentang Cara Menerapkan

Sekarang dilengkapi dengan pemahaman dasar tentang Next Commerce, mari kita masuk ke detail yang lebih menarik – penerapan. Mari kita mulai dengan prasyarat. Next.js tidak terlalu lengket, jadi ia hadir dengan persyaratan minimum.

Prasyarat

• Sebuah IDE
• TypeScript sebagai pengganti JavaScript
• Pengetahuan dasar BigCommerce API
• Direktori untuk /halaman dan /publik. Direktori untuk /pages akan memiliki _app.tsx dan index.tsx
• Direktori untuk /public akan memiliki media yang dapat disajikan secara statis.
• Selain itu, /pages juga akan memiliki halaman toko eCommerce dengan rutenya.
• Semua penyedia Git – baik itu Bitbucket, GitHub atau GitLab.
• NPM

Ini adalah persyaratan dasar untuk fungsi Next Commerce Anda. Anda selalu dapat mengatur ulang direktori lainnya nanti.

Paket dan Konfigurasi

Selain NPM dan Yarn, proses Next Commerce menggunakan file .env dan .config untuk memulai.

Agar aplikasi berfungsi dengan baik, Anda perlu menggunakan paket BigCommerce Storefront Data Hooks. Kait dapat digunakan kembali sesuai dengan kebutuhan komponen. Anda dapat menemukan komponen di direktori /components, dan ini dirender ke halaman. Tautan dari kait ke komponen dan ke halaman membutuhkan data dalam jumlah besar dari etalase. Jika Anda tidak ingin menghabiskan banyak uang untuk biaya pengembang, Anda dapat dengan mudah menggunakan paket BigCommerce Storefront Data Hooks untuk keuntungan Anda.

Paket ini membantu Anda mengakses kategori, data pelanggan penting, halaman produk, detail, dan banyak lagi. Setelah Anda berhasil menginstal paket, Anda dapat menautkan variabel .env Anda ke pasangan nilai kunci yang sesuai di etalase BigCommerce.

File .env secara otomatis disimpan di Vercel. Anda dapat dengan mudah menarik file .env dengan menggunakan perintah "vercel env pull". Anda sekarang dapat menyetel kunci API etalase BigCommerce dan token GraphQL dengan menggunakan file .env.local.

Langkah selanjutnya adalah konfigurasi file .config. Tsconfig.json memungkinkan Anda mengompilasi JavaScript untuk proyek Anda dan next.config.js adalah modul node. Banyak pengembang yang melewatkan ini, tetapi sangat disarankan jika Anda ingin mencapai fungsionalitas tertentu.

Menjalankan Proyek

Menjalankan proyek di server lingkungan pengembangan cukup mudah. Yang harus Anda lakukan adalah menggunakan perintah berikut:

yarn dev atau npm run dev

Penyebaran

Membangun Next.js Commerce juga cukup mudah – kunjungi nextjs.org/commerce dan klik tombol Clone and Deploy. Pada akhirnya, Anda harus dapat memiliki aplikasi Anda sendiri dan berjalan di Vercel – dengan logo toko Anda. Setelah Anda menerapkan, Anda dapat menyesuaikan toko Anda sesuai dengan kebutuhan Anda.

Kami akan melakukan proses integrasi selangkah demi selangkah.

Langkah 1:

Setelah Anda menekan tombol Clone and Deploy, Anda dapat mulai menerapkan menggunakan Vercel dengan penyedia Git.

Jika Anda memiliki akun Vercel, Anda dapat masuk menggunakan kredensial Anda.

Jika Anda tidak memiliki akun Vercel, Anda akan diminta untuk membuat akun menggunakan salah satu penyedia Git yang Anda pilih.

Langkah 2:

Setelah masuk ke akun Vercel, Anda akan melihat kotak dialog Clone Git Repository dengan daftar drop-down. Pilih akun Vercel Anda dan ketik nama proyek Anda di bidang yang disediakan dan tekan Lanjutkan.

Langkah 3:

Langkah selanjutnya adalah menginstal integrasi. Untuk menghubungkan toko BigCommerce Anda ke proyek Vercel Anda, tekan tombol Install. Setelah Anda menekan tombol Install, Anda akan melihat Add BigCommerce ke layar Vercel Project Anda.

Langkah 4:

Jika Anda sudah memiliki toko BigCommerce, Anda cukup Masuk menggunakan kredensial yang ada untuk mengintegrasikan Vercel dan BigCommerce. Namun, jika Anda baru mengenal BigCommerce, Anda mengklik Daftar.

Halaman Daftar akan memandu Anda membuat kotak pasir pengembang menggunakan formulir sederhana. Masukkan detail Anda dan setujui semua syarat dan ketentuan untuk mendaftar. Klik Lanjutkan ketika Anda melihat tanda centang biru di sebelah tab integrasi BigCommerce.

Langkah 5:

Sekarang Anda dapat membuat Repositori Git dengan mengetikkan nama repositori Anda. Klik Lanjutkan.

Langkah 6:

Setelah Anda masuk ke layar Impor Proyek, Anda seharusnya dapat mengkonfirmasi pengaturan proyek Anda dan klik Deploy. Seluruh penerapan tidak akan memakan waktu lebih dari beberapa menit.

Setelah penerapan ke Vercel selesai, Anda akan dapat melihat gambar mini situs yang Anda gunakan.

Selamat, proyek Anda telah berhasil di-deploy!

Bereaksi + Berikutnya.js

Anda dapat mengatur toko eCommerce Anda dengan Next - generator SSR untuk React - dan kemudian menyebarkan ke Vercel. Dengan menggunakan boilerplate Crystallize dan Next.js, Anda dapat dengan mudah membangun etalase eCommerce pengembangan web Jamstack. Sekarang, kita akan menggunakan Crystallize CLI untuk mengembangkan proyek baru.

Masukkan perintah berikut di terminal Anda.

npx @crystallize/cli

Dengan perintah ini, Anda dapat menambahkan boilerplate pilihan Anda, memilih untuk pergi dengan penyewa Anda sendiri, atau memilih penyewa demo dan menambahkan API Layanan.

Untuk menyebarkan ke Vercel, Anda harus menginstal persyaratan dasar ini di komputer Anda.

• Vercel CLI
• Penyedia Git
• Setidaknya, Versi 10 Node.js
• Seorang Penyewa dengan mendaftar ke Crystallize

Jalankan proyek di server pengembangan menggunakan:

yarn dev atau npm run dev

Dengan ini, Anda dapat mengakses situs pengembangan, memahami struktur aplikasi, dan mengedit halaman sesuai kebutuhan Anda.

Setelah Anda selesai membuat halaman untuk berbagai bentuk item, Anda dapat mulai menerapkan ke Vercel.

Sekali lagi, untuk menyebarkan proyek Anda ke Vercel, Anda harus melewati integrasi Github Vercel. Namun, Anda juga dapat menerapkan secara manual dengan mudah. Gunakan baris perintah untuk mengetik - login vercel - atur dua variabel lingkungan menggunakan dasbor Vercel.

Menyebarkan proyek Anda dengan Vercel membutuhkan penyedia Git. Dorong proyek Anda ke penyedia Git dan Anda hampir selesai – penerapan akan dimulai.

Membungkus

Era e-Commerce tanpa kepala telah tiba. Pengembangan situs eCommerce tradisional berpusat pada penawaran pengalaman full-stack dengan front-end dan back-end yang terjalin dengan baik. Ini membantu toko meluncurkan aplikasi mereka dengan cepat. Namun, Anda akan segera mengalami gangguan kinerja – yang paling signifikan, Anda tidak akan dapat menskalakan sebanyak yang Anda inginkan. Tetapi dengan eCommerce tanpa kepala, Anda tidak perlu banyak berjuang.

Desain tanpa kepala memberi Anda banyak kebebasan untuk mendesain front-end Anda sendiri dari awal atau menggunakan yang sudah jadi. Anda akan memiliki kemampuan untuk dengan cepat merespons perubahan di pasar dan menyesuaikan pengalaman pelanggan yang sesuai. Yang terpenting – Anda dapat membuat perubahan pada front-end Anda tanpa merusak back-end Anda. Sekarang Anda tahu mengapa, sebagai pengembang, kami yakin bahwa masa depan eCommerce pasti tanpa kepala.