getbetter

GET ( ) BETTER

GET ( ) BETTER는 Next.js 16 App Router로 만든 이커머스 목업(mock-up)입니다. 백엔드·DB·결제 시스템 없이, 브라우저의 localStorage만으로 장바구니·로그인·리뷰·어드민 콘텐츠 편집 기능을 재현합니다. 실제 상거래가 아닌 디자인·플로우 검증용 프로토타입입니다.

기술 스택

로컬 실행

npm install
npm run dev

http://localhost:3000 에서 확인합니다.

빌드

npm run build
npm run start

npm run build는 정적/SSG 페이지를 생성하고 라우트별 산출물을 출력합니다. npm run start는 빌드 결과로 Node.js 서버를 구동합니다.

환경변수

루트의 .env.local.example을 복사해 .env.local을 만들고 값을 채웁니다.

cp .env.local.example .env.local
변수 설명
NEXT_PUBLIC_ADMIN_EMAIL /admin 접근을 허용할 어드민 계정 이메일. 로그인한 사용자의 이메일과 (양쪽 trim + 소문자 변환 후) 비교하여 일치할 때만 어드민 화면을 노출합니다. 이 값이 없으면 /admin은 누구에게도 열리지 않습니다(fail-closed).

주의사항:

Vercel 배포

(node_modules/next/dist/docs/01-app/01-getting-started/17-deploying.md 기준)

  1. GitHub 등 원격 저장소에 프로젝트를 푸시합니다(.env.local은 커밋되지 않으므로 안전).
  2. Vercel에서 새 프로젝트로 이 저장소를 가져옵니다. Vercel은 Next.js를 검증된(Verified) 어댑터로 지원하며 next build/next start를 자동으로 인식합니다.
  3. Vercel 프로젝트의 Settings → Environment VariablesNEXT_PUBLIC_ADMIN_EMAIL을 등록합니다(값은 .env.local과 동일하게 관리자 이메일).
  4. Deploy를 실행하면 npm run build(next build)가 실행되고, 정적/SSG 라우트가 생성되어 배포됩니다.
  5. 배포 후 어드민 계정으로 사용할 이메일로 /signup에서 회원가입 → 로그인 → /admin 접근을 확인합니다.

어드민 사용법

목(mock) 기능의 한계

이 프로젝트는 백엔드가 없으며 모든 지속성은 브라우저의 localStorage에 의존합니다. 따라서:

실제 서비스로 전환하려면 다음이 필요합니다: