vercel/commerce

Shopify 기반 고성능 서버 렌더링 Next.js 이커머스 템플릿

템플릿맘대로 써도 됨 · MIT커머스·결제난이도
14,088+166이번 주5,41154TypeScript
데모·홈페이지 열기demo.vercel.store
중간맛 분석

Next.js App Router 기반 TypeScript 이커머스 템플릿. React Server Components, Server Actions, Suspense, useOptimistic 등 최신 Next.js 기능을 활용. Shopify를 주 공급자로 지원하며, BigCommerce, Saleor, Medusa 등 9개 이상의 다른 결제 플랫폼으로 확장 가능. 클론 후 환경변수 설정만으로 즉시 운영 가능한 데모 스토어 포함(demo.vercel.store). Vercel 원클릭 배포 지원.

이런 레포예요

이럴 때 쓰면 좋아요

  • Shopify 기반 고성능 온라인 스토어를 빠르게 구축하고 Vercel에 배포하고 싶을 때
  • React 최신 기술(Server Components, Server Actions)을 실제 프로덕션 프로젝트에서 배우고 싶을 때
  • BigCommerce, Saleor, Medusa 등 여러 결제 플랫폼을 지원하는 통일된 이커머스 프런트엔드를 만들고 싶을 때

핵심 기능

React Server Components와 Server Actions 활용한 최신 Next.js 구조Shopify 및 9개 이상 결제 플랫폼 지원Vercel 원클릭 배포 및 환경변수 자동 관리

대안 대비 차별점

Vercel이 공식 유지보수하는 Next.js 이커머스 표준으로서 App Router와 Server Components 등 최신 Next.js 기능을 프로덕션급 예제로 제공하며, provider 구조로 여러 플랫폼 간 유연한 교체가 가능합니다.

준비물
  • Node.js/pnpm
  • Vercel 계정
  • Shopify 스토어 또는 지원 플랫폼 (BigCommerce, Saleor 등)
바로 시작하기
  1. Vercel CLI 설치
npm i -g vercel
  1. 로컬 인스턴스를 Vercel과 GitHub 계정에 연결 (.vercel 디렉토리 생성)
vercel link
  1. 환경변수 다운로드 (.env.example 참조)
vercel env pull
  1. 패키지 설치
pnpm install
  1. 개발 서버 실행
pnpm dev
  1. 브라우저에서 http://localhost:3000 접속
별 추이 · 7일
14,088+166 / 7일
활용성 · 따라 만들기 좋은가
샘플 점수 34/100
  • 관대한 라이선스
  • 테스트 있음
  • 예제 디렉토리
  • 최근 활동
  • AGENTS.md
  • llms.txt
  • 템플릿

🟢 최근 활동 있음 · 2020년 생성

AI가 README 기반으로 요약했습니다 · 원문 보기