Build and Deploy a Multi Vendor E Commerce With Nextjs, React & Stripe Connect (Part 2/2)
- 이 튜토리얼은 Next.js, React 및 Stripe Connect를 사용하여 멀티 테넌트 전자 상거래 플랫폼을 구축하고 배포하는 방법을 다룹니다. 🛍️
- 이 튜토리얼의 1부에서는 스토어 레이아웃, Payload 통합, 카테고리 설정, 인증 추가 및 멀티 테넌시 아키텍처 구현을 다루었습니다. 🏗️
- 2부에서는 장바구니, 결제, Stripe Connect 통합, 제품 리뷰, 공급업체 하위 도메인 및 배포를 포함한 전체 구매 흐름을 완료합니다. 🛒
- 이 튜토리얼을 개발할 때 사용한 Node.js 버전은 21.7.3이었으며, 최신 LTS 버전으로 업그레이드할 수 있다고 언급했습니다. 👨💻
- 최신 LTS 버전(예: 22.14.0)을 사용하는 경우 "module not found" 오류가 발생할 수 있으며, package.json 파일에 "type": "module"을 추가하여 해결할 수 있습니다. ⚠️
- 플러그인을 개발할 때 사용자에게 모든 테넌트에 대한 액세스 권한이 있었지만, 역할이 제대로 입력되지 않았습니다. 이는 구성 파일을 추가하여 수정할 수 있습니다. 🔑
- 제품 페이지 개발은 getOneProduct 프로시저를 구축하여 시작하며, 이를 통해 작업할 데이터를 가져올 수 있습니다. 📦
- 제품 ID 경로를 생성하기 위해 app/tenants/home에 products/[productId]/page.tsx 파일을 만듭니다. 📁
- 제품 카드 구성 요소에서 href 링크를 수정하여 generateTenantURL을 사용하고 /product/[id]로 이동합니다. 🔗
- useSuspenseQuery를 사용하여 데이터를 가져오고, 제품 이미지와 테넌트 정보를 표시합니다. 🖼️
- 제품 보기 페이지의 UI를 구축하고, 제품 이름, 가격, 작성자/상점 정보, 평점 등을 표시합니다. 🎨
- 통화 형식을 지정하는 유틸리티 함수를 추가하여 제품 가격을 표시합니다. 💰
- 별점 구성 요소를 생성하여 제품 평점을 표시하고, 데스크톱 및 모바일 장치에 맞게 스타일을 지정합니다. ⭐