Next Js Commerce - ภาพรวมและแนวทางปฏิบัติ

ในฐานะนักพัฒนา เราจำเป็นต้องปฏิบัติตามเทคโนโลยีล่าสุดอย่างแน่วแน่ เราได้รับแรงผลักดันจากความกระหายที่ไม่รู้จักพอนี้ในการเรียนรู้ทุกสิ่งทุกอย่าง ทุกสิ่งทุกอย่าง เกี่ยวกับเทคโนโลยีขนาดใหญ่และนวัตกรรมทุกอย่าง เราปรารถนาที่จะได้เห็นอนาคตอันแสนพิเศษ – และความปรารถนานี้ทำให้เราก้าวต่อไป การแสวงหาเทคโนโลยีอีคอมเมิร์ซล่าสุดทำให้เรา – Next Commerce

Next Commerce เป็นข้อเสนอล่าสุดจาก BigCommerce โดยความร่วมมือกับทีม Next.js และ Vercel ด้วย Next Commerce นักพัฒนา eCommerce สามารถติดตั้งแอปพลิเคชันหัวขาดที่รวมเข้ากับ BigCommerce ได้ในเวลาไม่กี่นาที เป็นความพยายามครั้งแรกจากทั้ง Next และ BigCommerce

การค้าหัวขาดน่าจะเป็นอนาคตของอีคอมเมิร์ซที่น่าจะเป็นไปได้มากที่สุด การค้าแบบไร้หัวช่วยให้นักพัฒนาออกแบบและพัฒนาแอพที่เป็นนวัตกรรมได้ง่าย เข้าถึงตลาดโลกที่กว้างขึ้น และช่วยให้กราฟการขายของร้านค้าอีคอมเมิร์ซชี้ไปทางเหนือ

จากรายงานประสิทธิภาพของไซต์ จากการสำรวจผู้บริหารอีคอมเมิร์ซ 120 คน 62% เห็นว่าการค้าแบบไร้หัวสามารถปรับปรุงอัตราการแปลงและการมีส่วนร่วมของลูกค้าได้อย่างมีนัยสำคัญ

เรารู้สึกตื่นเต้นที่ได้แสดงให้คุณเห็นว่าติดตั้งง่ายและเหลือเชื่อเพียงใดในการใช้ข้อเสนอล่าสุดจาก BigCommerce และ Next คำแนะนำทีละขั้นตอนนี้เป็นทุกสิ่งที่คุณต้องการเพื่อเริ่มต้นใช้งาน Next Commerce

เราจะเริ่มต้นด้วยภาพรวม

ภาพรวมของ Next Commerce

Next.js เป็นเว็บเฟรมเวิร์กโอเพ่นซอร์สที่ใช้กันอย่างแพร่หลาย ซึ่งคุณสามารถสร้างแอปพลิเคชันของคุณเองได้ ทั้งการเรนเดอร์ฝั่งเซิร์ฟเวอร์และแอปพลิเคชันแบบสแตติกโดยใช้ React ปัจจุบัน กรอบงานนำ Next.js Commerce มาให้เรา เป็นชุดเครื่องมือสำหรับนักพัฒนาที่เราสามารถสร้างไซต์อีคอมเมิร์ซที่มีประสิทธิภาพสูง ปรับแต่งได้ และมีส่วนร่วม นำเสนอพร้อมกับแพลตฟอร์ม SaaS แบบเปิดที่แข็งแกร่งเช่น BigCommerce ความเป็นไปได้และศักยภาพของ Next Commerce นั้นยิ่งใหญ่มาก

ทำไมตลาดถึงมุ่งสู่อีคอมเมิร์ซหัวขาด?

Next.js เป็นเครื่องมือที่ทรงพลังในการสร้างไซต์อีคอมเมิร์ซของคุณ เป็นสถาปัตยกรรมที่สมบูรณ์และแข็งแกร่งที่สามารถปรับขนาด ปรับแต่ง และกำหนดค่าสำหรับการใช้งานอีคอมเมิร์ซต่างๆ

แม้ว่า Next.js จะขยายประโยชน์มากมาย แต่นี่คือบางส่วนที่สำคัญบางประการ:

• การแสดงผลเซิร์ฟเวอร์

  ส่วนประกอบ React สามารถแสดงผลฝั่งเซิร์ฟเวอร์ก่อนที่จะส่ง HTML ไปยังไคลเอนต์ได้

• การโหลดรหัสร้อน

  ทุกครั้งที่ Next.js ตรวจพบการเปลี่ยนแปลง หน้าจะโหลดซ้ำ URL ใด ๆ จะถูกส่งไปยังระบบไฟล์โดยอัตโนมัติ คุณไม่จำเป็นต้องมีทักษะการกำหนดค่าใดๆ จากคุณ อย่างไรก็ตาม คุณสามารถปรับแต่งตามความต้องการของคุณได้เสมอ

• ความเข้ากันได้ของระบบนิเวศ

  Next.js สามารถทำงานร่วมกับ React, Node และ JavaScript ได้เป็นอย่างดี

• แยกรหัสโดยอัตโนมัติ

  หน้ามีเฉพาะไลบรารีและ JavaScript เท่านั้น ไม่มีอะไรมากไปกว่านั้น แทนที่จะสร้าง JavaScript ตัวเดียวที่มีรหัสแอปทั้งหมด Next.js จะแบ่งแอปออกเป็นแหล่งข้อมูลต่างๆ ทำให้กระบวนการทั้งหมดง่ายขึ้น



• รองรับ TypeScript

  เนื่องจาก Next.js เขียนด้วย TypeScript จึงให้การสนับสนุนอย่างสมบูรณ์

• กำลังดึงข้อมูลล่วงหน้า

  พร็อพดึงข้อมูลล่วงหน้าได้รับการสนับสนุนโดยคอมโพเนนต์ของลิงก์ที่จะดึงทรัพยากรของเพจโดยอัตโนมัติ แม้แต่โค้ดที่แยกออกมาโดยอัตโนมัติ

• แอพพลิเคชั่นไฮบริด

  เป็นไปได้ที่จะใช้ประโยชน์จากทั้ง SSR และเว็บแอปพลิเคชันแบบคงที่ในโครงการเดียวโดยใช้ Next.js

• ไม่จำเป็นต้องมีการกำหนดค่า

  เฟรมเวิร์กที่พร้อมสำหรับการผลิตนี้เหมาะอย่างยิ่งสำหรับทีมวิศวกรที่พยายามเสนอความสามารถในการปรับขนาดและใช้งานง่ายสำหรับร้านค้าอีคอมเมิร์ซ มันมาพร้อมกับการคอมไพล์และการรวมอัตโนมัติ, การสนับสนุน CSS ในตัว, การกำหนดเส้นทางระบบไฟล์, การแยกโค้ดอัตโนมัติ และการสร้าง API

ภาพรวมเกี่ยวกับวิธีการปรับใช้

ตอนนี้มีความเข้าใจพื้นฐานเกี่ยวกับ Next Commerce แล้ว เรามาดูรายละเอียดที่ฉูดฉาดมากขึ้นอย่างรวดเร็วกัน – การปรับใช้ เริ่มจากข้อกำหนดเบื้องต้นกันก่อน Next.js ไม่ได้ยึดติดมาก ดังนั้นจึงมาพร้อมกับข้อกำหนดขั้นต่ำที่เปลือยเปล่า

ข้อกำหนดเบื้องต้น

• IDE
• TypeScript แทนที่ JavaScript
• ความรู้พื้นฐานของ BigCommerce APIs
• ไดเร็กทอรีสำหรับ /pages และ /public ไดเร็กทอรีสำหรับ /pages จะมี _app.tsx และ index.tsx
• ไดเร็กทอรีสำหรับ /public จะมีสื่อที่สามารถให้บริการแบบสแตติก
• นอกจากนี้ /pages จะมีหน้าร้านค้าอีคอมเมิร์ซพร้อมเส้นทาง
• ผู้ให้บริการ Git ใดๆ ไม่ว่าจะเป็น Bitbucket, GitHub หรือ GitLab
• NPM

นี่คือข้อกำหนดพื้นฐานสำหรับฟังก์ชัน Next Commerce ของคุณ คุณสามารถจัดระเบียบไดเร็กทอรีที่เหลือในภายหลังได้ตลอดเวลา

แพ็คเกจและการกำหนดค่า

นอกจาก NPM และ Yarn แล้ว การรัน Next Commerce ยังใช้ไฟล์ .env และ .config เพื่อเริ่มต้น

เพื่อให้แอปพลิเคชันทำงานได้อย่างถูกต้อง คุณจะต้องใช้แพ็คเกจ BigCommerce Storefront Data Hooks ตะขอสามารถนำกลับมาใช้ใหม่ได้ตามความต้องการของส่วนประกอบ คุณสามารถค้นหาส่วนประกอบในไดเร็กทอรี /components และส่วนประกอบเหล่านี้จะแสดงผลในหน้า ลิงก์จาก hooks ไปยังส่วนประกอบและไปยังหน้าต่างๆ ต้องการข้อมูลจำนวนมากจากหน้าร้าน หากคุณไม่ต้องการใช้โชคไปกับต้นทุนของนักพัฒนา คุณสามารถใช้แพ็คเกจ BigCommerce Storefront Data Hooks เพื่อประโยชน์ของคุณ

แพ็คเกจนี้ช่วยให้คุณเข้าถึงหมวดหมู่ ข้อมูลลูกค้าที่สำคัญ หน้าผลิตภัณฑ์ รายละเอียด และอื่นๆ อีกมากมาย เมื่อคุณติดตั้งแพ็คเกจสำเร็จแล้ว คุณสามารถเชื่อมโยงตัวแปร .env ของคุณกับคู่คีย์-ค่าที่เหมาะสมในหน้าร้าน BigCommerce

ไฟล์ .env จะถูกเก็บไว้ใน Vercel โดยอัตโนมัติ คุณสามารถดึงไฟล์ .env ได้อย่างง่ายดายโดยใช้คำสั่ง “vercel env pull” ตอนนี้คุณสามารถตั้งค่าคีย์ API หน้าร้าน BigCommerce และโทเค็น GraphQL ได้โดยใช้ไฟล์ .env.local

ขั้นตอนต่อไปคือการกำหนดค่าไฟล์ .config tsconfig.json ให้คุณคอมไพล์ JavaScript สำหรับโปรเจ็กต์ของคุณ และ next.config.js คือโหนดโมดูล นักพัฒนาหลายคนพลาดสิ่งนี้ แต่ขอแนะนำอย่างยิ่งหากคุณต้องการบรรลุฟังก์ชันการทำงานเฉพาะ

ดำเนินโครงการ

การรันโปรเจ็กต์ในเซิร์ฟเวอร์สภาพแวดล้อมการพัฒนานั้นค่อนข้างตรงไปตรงมา สิ่งที่คุณต้องทำคือใช้คำสั่งต่อไปนี้:

เส้นด้าย dev หรือ npm เรียกใช้ dev

การปรับใช้

การสร้าง Next.js Commerce นั้นค่อนข้างง่ายเช่นกัน – ไปที่ nextjs.org/commerce และคลิกที่ปุ่ม Clone and Deploy ในตอนท้าย คุณควรจะสามารถมีแอปพลิเคชันของคุณเองและทำงานบน Vercel ด้วยโลโก้ร้านค้าของคุณได้ เมื่อคุณปรับใช้แล้ว คุณสามารถปรับแต่งร้านค้าของคุณได้ตามความต้องการของคุณ

เราจะใช้กระบวนการผสานรวมทีละขั้น

ขั้นตอนที่ 1:

เมื่อคุณกดปุ่ม Clone และ Deploy คุณสามารถเริ่มปรับใช้ Vercel กับผู้ให้บริการ Git ได้

หากคุณมีบัญชี Vercel คุณสามารถเข้าสู่ระบบโดยใช้ข้อมูลประจำตัวของคุณ

หากคุณไม่มีบัญชี Vercel คุณจะได้รับแจ้งให้สร้างบัญชีโดยใช้ผู้ให้บริการ Git ที่คุณเลือก

ขั้นตอนที่ 2:

หลังจากลงชื่อเข้าใช้บัญชี Vercel คุณจะเห็นกล่องโต้ตอบ Clone Git Repository พร้อมรายการดรอปดาวน์ เลือกบัญชี Vercel ของคุณและพิมพ์ชื่อโครงการของคุณในฟิลด์ที่ให้ไว้และกดดำเนินการต่อ

ขั้นตอนที่ 3:

ขั้นตอนต่อไปคือการติดตั้งการผสานรวม หากต้องการเชื่อมต่อร้าน BigCommerce กับโครงการ Vercel ให้กดปุ่มติดตั้ง เมื่อคุณกดปุ่ม ติดตั้ง คุณจะเห็นหน้าจอ เพิ่ม BigCommerce ไปยัง Vercel Project ของคุณ

ขั้นตอนที่ 4:

หากคุณมีร้าน BigCommerce อยู่แล้ว คุณสามารถเข้าสู่ระบบโดยใช้ข้อมูลประจำตัวที่มีอยู่ของคุณเพื่อรวม Vercel และ BigCommerce อย่างไรก็ตาม หากคุณเพิ่งเริ่มใช้ BigCommerce คุณคลิกสมัครใช้งาน

หน้าลงทะเบียนจะแนะนำคุณเกี่ยวกับการสร้างแซนด์บ็อกซ์สำหรับนักพัฒนาโดยใช้แบบฟอร์มง่ายๆ ป้อนรายละเอียดของคุณและยอมรับข้อกำหนดและเงื่อนไขทั้งหมดเพื่อลงทะเบียน คลิกดำเนินการต่อเมื่อคุณเห็นเครื่องหมายถูกสีน้ำเงินถัดจากแท็บการรวม BigCommerce

ขั้นตอนที่ 5:

ตอนนี้คุณสามารถสร้าง Git Repository โดยพิมพ์ชื่อที่เก็บของคุณ คลิกดำเนินการต่อ

ขั้นตอนที่ 6:

เมื่อคุณไปที่หน้าจอนำเข้าโครงการ คุณควรจะสามารถยืนยันการตั้งค่าโครงการของคุณและคลิกปรับใช้ การปรับใช้ทั้งหมดไม่ควรใช้เวลานานกว่าสองสามนาที

เมื่อปรับใช้ Vercel เสร็จแล้ว คุณจะสามารถเห็นภาพขนาดย่อของไซต์ที่คุณปรับใช้

ยินดีด้วย โปรเจ็กต์ของคุณใช้งานได้สำเร็จแล้ว!

React + Next.js

คุณสามารถตั้งค่าร้านค้าอีคอมเมิร์ซของคุณด้วย Next - ตัวสร้าง SSR สำหรับ React แล้วปรับใช้กับ Vercel การใช้ Crystallize และ Next.js ต้นแบบ คุณสามารถสร้างหน้าร้านอีคอมเมิร์ซสำหรับการพัฒนาเว็บ Jamstack ได้อย่างง่ายดาย ตอนนี้ เราจะใช้ Crystallize CLI เพื่อพัฒนาโครงการใหม่

ป้อนคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ

npx @crystallize/คลิ

ด้วยคำสั่งนี้ คุณจะสามารถเพิ่มในสำเร็จรูปที่คุณต้องการ เลือกที่จะไปกับผู้เช่าของคุณเอง หรือเลือกผู้เช่าตัวอย่างและเพิ่ม Service API

ในการปรับใช้กับ Vercel คุณจะต้องติดตั้งข้อกำหนดพื้นฐานเหล่านี้ในคอมพิวเตอร์ของคุณ

• Vercel CLI
• ผู้ให้บริการ Git
• อย่างน้อยเวอร์ชัน 10 Node.js
• ผู้เช่าโดยลงทะเบียนกับ Crystallize

เรียกใช้โครงการในเซิร์ฟเวอร์การพัฒนาโดยใช้:

เส้นด้าย dev หรือ npm เรียกใช้ dev

ด้วยสิ่งนี้ คุณสามารถเข้าถึงไซต์การพัฒนา ทำความเข้าใจโครงสร้างแอพ และแก้ไขหน้าตามความต้องการของคุณ

เมื่อคุณสร้างเพจสำหรับรูปร่างของไอเท็มต่างๆ เสร็จแล้ว คุณสามารถเริ่มปรับใช้กับ Vercel ได้

อีกครั้ง ในการปรับใช้โครงการของคุณกับ Vercel คุณจะต้องผ่านการผสานรวม Vercel Github อย่างไรก็ตาม คุณสามารถปรับใช้ด้วยตนเองได้อย่างง่ายดายเช่นกัน ใช้บรรทัดคำสั่งเพื่อพิมพ์ - เข้าสู่ระบบ vercel - ตั้งค่าตัวแปรสภาพแวดล้อมสองตัวโดยใช้แดชบอร์ด Vercel

การปรับใช้โครงการของคุณกับ Vercel จำเป็นต้องมีผู้ให้บริการ Git ส่งโปรเจ็กต์ของคุณไปยังผู้ให้บริการ Git และคุณใกล้เสร็จแล้ว – การปรับใช้จะเริ่มขึ้น

ห่อ

ยุคของอีคอมเมิร์ซหัวขาดอยู่ที่นี่ การพัฒนาไซต์อีคอมเมิร์ซแบบดั้งเดิมมีศูนย์กลางอยู่ที่การมอบประสบการณ์แบบฟูลสแตกด้วยส่วนหน้าและส่วนหลังที่ประสานกันเป็นอย่างดี ซึ่งช่วยให้ร้านค้าเปิดแอปพลิเคชันของตนได้อย่างรวดเร็ว อย่างไรก็ตาม ในไม่ช้าคุณจะประสบปัญหาประสิทธิภาพการทำงาน ที่สำคัญที่สุดคือคุณจะไม่สามารถปรับขนาดได้มากเท่าที่คุณต้องการ แต่ด้วยอีคอมเมิร์ซหัวขาด คุณไม่ต้องดิ้นรนมาก

การออกแบบที่ไม่มีส่วนหัวช่วยให้คุณมีอิสระอย่างมากในการออกแบบส่วนหน้าของคุณเองตั้งแต่ต้น หรือใช้ส่วนหน้าที่สร้างไว้ล่วงหน้า คุณจะมีความสามารถในการตอบสนองอย่างรวดเร็วต่อการเปลี่ยนแปลงในตลาดและปรับแต่งประสบการณ์ของลูกค้าให้เหมาะสม ที่สำคัญที่สุด – คุณสามารถเปลี่ยนแปลงส่วนหน้าของคุณได้โดยไม่ต้องยุ่งเกี่ยวกับส่วนหลังของคุณ ตอนนี้ คุณรู้แล้วว่าทำไม ในฐานะนักพัฒนา เราจึงมั่นใจว่าอนาคตของอีคอมเมิร์ซนั้นไม่มีหัวเรื่องอย่างแน่นอน