bagisto/nextjs-commerce

Bagisto 백엔드 기반 Next.js 헤드리스 전자상거래 프레임워크로, 100/100 Core Web Vitals 성능을 달성한다.

완성 앱맘대로 써도 됨 · MIT웹·Next.js·풀스택난이도
5,731+0이번 주1070TypeScript
데모·홈페이지 열기bagisto-headless.vercel.app
중간맛 분석

TypeScript + Next.js 13+ 스택, Bagisto GraphQL , NextAuth.js 인증, ISR 캐싱 지원. 클론 후 환경변수 설정(Bagisto 엔드포인트, 스토어프론트 키) → pnpm install → pnpm dev로 즉시 실행 가능. Netlify/Vercel 원클릭 배포 지원. 상품 검색·필터링, 계층형 카테고리, 장바구니·결제, 리뷰 기능 등이 이미 구현되어 있어 커스터마이징만 하면 됨.

이런 레포예요

이럴 때 쓰면 좋아요

  • 완전 커스터마이징 가능한 온라인 쇼핑몰을 빠르게 구축하고 싶을 때
  • 자체 서버에서 전자상거래 백엔드를 호스팅하되, 최신 프론트엔드 성능이 필요할 때
  • SEO 최적화와 빠른 로딩 속도가 중요한 대규모 상품 카탈로그 운영 시

핵심 기능

100/100 Core Web Vitals 성능 달성완전 오픈소스 Bagisto 백엔드 연동NextAuth.js 인증 및 ISR 캐싱

대안 대비 차별점

Shopify나 WooCommerce와 달리 완전 오픈소스 Bagisto 백엔드를 기반으로 하므로 자체 서버 호스팅과 소스 코드 수정이 자유로우며, 특정 클라우드 플랫폼 종속성이 없다.

준비물
  • Node.js 18 이상
  • pnpm
  • Bagisto v2.4.x 백엔드
  • Bagisto Headless Extension
바로 시작하기
  1. Bagisto 백엔드 설치

Bagisto 공식 문서에 따라 서버에 Bagisto를 먼저 설치합니다.

  1. Bagisto Headless Extension 설치

Bagisto 설치 후 Bagisto Headless Extension을 설치하여 API 노출합니다.

  1. Next.js 스토어프론트 생성
npx -y @bagisto-headless/create your-storefront
  1. 프로젝트 디렉토리로 이동 및 의존성 설치
cd your-storefront
pnpm install
  1. 환경변수 설정

프로젝트 루트에 .env.local 파일을 생성하여 다음을 입력합니다:

NEXT_PUBLIC_BAGISTO_ENDPOINT=https://your-store.bagisto.com/
NEXT_PUBLIC_BAGISTO_STOREFRONT_KEY=pk_storefront_*************************
NEXTAUTH_URL=https://headless-store.com/
NEXTAUTH_SECRET=$(openssl rand -base64 32)
COMPANY_NAME=Bagisto Headless Store
  1. 개발 서버 실행
pnpm dev

브라우저에서 http://localhost:3000 접속으로 확인합니다.

별 추이 · 7일
5,731+0 / 7일
활용성 · 따라 만들기 좋은가
샘플 점수 34/100
  • 관대한 라이선스
  • 테스트 있음
  • 예제 디렉토리
  • 최근 활동
  • AGENTS.md
  • llms.txt
  • 템플릿

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

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