next shopify storefront

? Storefront Shopify berikutnya

Keranjang belanja yang dibangun dengan naskah, CSS tailwind, UI tanpa kepala, Next.js, react.js, Shopify Hydrogen React, ... dan Shopify etalase graphql API.

Tutorial

• Bagaimana cara mengatur proyek selanjutnya yang berkelanjutan?
• Bagaimana cara menangani pengambilan data modular TypeSafe di Next.js?
• Bagaimana cara berinteraksi dengan aman dengan graphql API di next.js?
• Bagaimana cara menerapkan pemilih varian dinamis untuk Shopify di Next.js?

Pengalaman

Ini adalah pengalaman saya ketika saya sedang mengerjakan proyek ini:

• Merancang & membangun etalase dari awal.
• Membuat utilitas berikutnya untuk pengambilan data modular tipe-aman.
• Membuat utilitas Shopify untuk menyederhanakan pemilihan varian.
• Menggunakan GraphQL Zeus untuk berinteraksi dengan API etalase.
• Menggunakan Shopify Hydrogen untuk mengimplementasikan fitur etalase.
• Menggunakan CSS Tailwind & UI tanpa kepala untuk membangun UI etalase.
• Menggunakan Next.js untuk regenerasi statis tambahan.
• Menggunakan SEO berikutnya untuk mengimplementasikan optimasi mesin pencari.
• Menggunakan naskah untuk membuat kait reaksi dengan aman, dan komponen.
• Menggunakan react menggunakan kait untuk mempercepat pengembangan komponen.
• Menggunakan swiper untuk membuat slider yang indah, dapat disentuh, responsif.
• Menggunakan Eslint, lebih cantik untuk mengikuti praktik terbaik Next.js.

Jika Anda menyukai proyek ini, tekan tombol Star untuk menandai ️

Demonstrasi

Anda dapat mengunjungi di sini untuk melihat demo: https://next-shopify-storefront.vercel.app/

Instalasi

Kloning kode sumber ke komputer Anda.

git clone https://github.com/maxvien/next-shopify-storefront.git

Instal dependensi proyek.

npm install

Penggunaan

Pertama, Anda perlu mengatur variabel lingkungan di bawah ini dalam file .env atau platform penyebaran Anda.

• NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION

Anda dapat mengikuti dokumentasi API GraphQL toko Shopify untuk mendapatkan informasi API etalase.

Mengembangkan

Kembangkan proyek dalam mode pengembangan.

npm run dev

Membangun

Bangun proyek dalam mode produksi.

npm run build

Awal

Mulai proyek dalam mode produksi.

npm run start

Serat

Menganalisis kode untuk menemukan masalah dengan eslint dan prettier .

npm run lint

Secara otomatis memperbaiki masalah.

npm run fix

Ekstensi Kode Studio Visual

Untuk mempercepat produktivitas Anda, Anda dapat menginstal ekstensi ini:

• Eslint
• Lebih cantik
• Visual Studio Intellicode
• Tailwind CSS Intellisense
• Dukungan Bahasa PostCSS

Proyek terkait

• Shopify Data Faker • Alat pengembangan Shopify untuk menghasilkan data toko boneka.
• Tema Bootstrap Shopify • Tema Shopify gratis yang dibangun dengan Bootstrap, Bem, Liquid, Sass, Esnext, Tema Alat, ... dan Webpack.
• Shopify Storefront berikutnya (V2) • Keranjang belanja yang dibangun dengan naskah, emosi, selanjutnya.
• Shopify Storefront berikutnya (V1) • Keranjang belanja yang dibangun dengan naskah, NextJs, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... dan material UI.

Sejarah Bintang