유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

Build and Deploy a Multi Vendor E Commerce With Nextjs, React & Stripe Connect (Part 2/2)

Code With Antonio

2025. 4. 23.

0

#frontend
#backend
  • 이 튜토리얼은 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를 구축하고, 제품 이름, 가격, 작성자/상점 정보, 평점 등을 표시합니다. 🎨
  • 통화 형식을 지정하는 유틸리티 함수를 추가하여 제품 가격을 표시합니다. 💰
  • 별점 구성 요소를 생성하여 제품 평점을 표시하고, 데스크톱 및 모바일 장치에 맞게 스타일을 지정합니다. ⭐

Recommanded Videos