w3bdesign/nextjs-woocommerce

Next.js와 WooCommerce GraphQL로 만든 완전한 전자상거래 사이트

완성 앱조건 있음 · AGPL-3.0커머스·결제TypeScript난이도
608+-1이번 주0 찜
151포크4이슈
데모·홈페이지 열기next-woocommerce.dfweb.no

중간맛 분석

스택: Next.js 16, React 19, TypeScript, Zustand(상태관리), Apollo Client(GraphQL), Tailwind CSS, Framer Motion, React Hook Form | 난이도: WordPress WooCommerce 플러그인 설정(wp-graphql, wp-graphql-woocommerce, wp-algolia-woo-indexer) 필수, GraphQL 기본 이해 필요 | 바로 쓸 수 있나: 예, 라이브 데모(next-woocommerce.dfweb.no) 제공, 환경변수 설정 후 pnpm run dev로 즉시 실행 가능 | 데모: Playwright 자동 테스트, Lighthouse 자동 성능 점수 측정, OWASP 보안 스캔 포함

이런 레포예요

이럴 때 쓰면 좋아요

  • WordPress WooCommerce를 백엔드로 사용하면서 모던 React 프론트엔드로 쇼핑몰을 완전 재구성하고 싶을 때
  • Algolia 검색과 동적 필터링이 필요한 고급 상품 카탈로그 사이트
  • 자동화된 성능·보안·접근성 모니터링이 필요한 프로덕션급 전자상거래 플랫폼

핵심 기능

WooCommerce GraphQL API 통합으로 상품·카트·결제 데이터 관리Zustand + localStorage로 영구적 장바구니 상태 동기화Algolia 검색과 Tailwind 기반 동적 색상·가격·크기 필터링

대안 대비 차별점

완전한 GraphQL 기반 아키텍처에 자동화된 Lighthouse 성능 모니터링·Playwright 테스트·OWASP 보안 스캔을 CI/CD로 통합하여 기본 WooCommerce 테마보다 훨씬 높은 코드 품질과 보안 기준을 유지합니다.

준비물

  • WordPress 6.9+
  • WooCommerce 9.9.5+
  • WP GraphQL 2.3.3+
  • WP GraphQL WooCommerce 0.19.0+
  • WP Algolia Woo Indexer 플러그인
  • Node.js 18+ (pnpm 권장)

바로 시작하기

  1. WordPress에 필수 플러그인 설치 및 활성화
# WooCommerce, WP GraphQL, WP GraphQL WooCommerce, WP Algolia Woo Indexer 플러그인을 WordPress 관리자에서 설치
  1. 리포지토리 클론
git clone https://github.com/w3bdesign/nextjs-woocommerce.git
cd nextjs-woocommerce
  1. 환경 변수 설정
cp .env.example .env
  1. .env 파일을 WordPress GraphQL 엔드포인트, Algolia API 키 등으로 수정
# .env 내용 예시:
# NEXT_PUBLIC_WORDPRESS_URL=https://your-wordpress-site.com
# NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://your-wordpress-site.com/graphql
# NEXT_PUBLIC_ALGOLIA_APP_ID=your_app_id
# NEXT_PUBLIC_ALGOLIA_SEARCH_KEY=your_search_key
  1. 의존성 설치 및 개발 서버 시작
pnpm install
pnpm run dev
  1. 브라우저에서 http://localhost:3000 접속 및 상품 확인, 장바구니·결제 테스트

별 추이 · 7일

608+-1 / 7일

활용성 · 따라 만들기 좋은가

샘플 점수 14/100
  • 관대한 라이선스
  • 테스트 있음
  • 예제 디렉토리
  • 최근 활동
  • AGENTS.md
  • llms.txt
  • 템플릿

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

이 레포에 깃밥 배지 달기

[![깃밥](https://www.gitbap.com/badge/w3bdesign/nextjs-woocommerce.svg)](https://www.gitbap.com/r/w3bdesign/nextjs-woocommerce)

🔌 클로드에서 바로 써보기

깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.

방법 ① 커넥터 URL

클로드 설정 → 커넥터에 이 주소를 붙여넣기.

https://www.gitbap.com/api/mcp
방법 ② 플러그인 (체험까지)

플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.

/plugin marketplace add jakeparkcolde/gitbap-cowork
/plugin install gitbap-cowork@gitbap
연결 방법 자세히 →

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