Build a directory listing website that earns online

개요

Next.js 15, Supabase, Stripe를 사용하여 빠르고 쉽게 온라인 수익 창출이 가능한 디렉토리 리스팅 웹사이트를 구축할 수 있는 ToolDir 템플릿을 소개합니다.

주요 내용

• ToolDir 템플릿: Next.js 15 (Pages Router) 기반의 AI 도구 디렉토리 템플릿으로, 공개 디렉토리 사이트 운영, 도구 제출 접수, 런치 슬롯 판매, 블로그 게시 및 관리 기능을 제공합니다.
• 기술 스택: Next.js 15 (Pages Router), React 18, Tailwind, shadcn/ui, Supabase (Auth, Postgres, Storage), TanStack React Query, Redux Toolkit, TipTap, Stripe (일회성 Checkout), Resend, Framer Motion을 사용합니다.
• 아키텍처: pages/ 디렉토리가 실제 Next.js 라우트 및 API 핸들러를 담당하며, app/admin/은 관리자 UI, app/frontend/는 마케팅 사이트 컴포넌트로 구성됩니다.
• 주요 라우트: / (홈), /tool/[slug] (도구 상세), /categories/[slug] (카테고리 필터), /submit (제출), /pricing (런치 슬롯), /dashboard (사용자 제출), /blog, /auth/callback, /robots.txt, /sitemap.xml 등이 포함됩니다.
• 관리자 라우트: /admin을 통해 분석, 사용자, 제출, 결제, 송장, 가격 슬롯, 블로그 관리 등의 기능을 제공합니다.
• API 라우트: /api/directory-tools/publish, /api/tool-submissions/create, /api/stripe/checkout, /api/stripe/webhook 등 다양한 API 엔드포인트를 제공합니다.
• 데이터 모델: directory_tools, tool_submissions, pricing_slots, blogs를 중심으로 users, customers, payments 등의 테이블을 사용합니다.
• Supabase Storage: saas-starter-storage 버킷을 사용하여 이미지 등을 저장합니다.
• 환경 변수: NEXT_PUBLIC_SITE_URL, NEXT_PUBLIC_SUPABASE_URL, STRIPE_SECRET_KEY 등 필수 환경 변수를 설정해야 합니다.
• 제거된 기능: Forms builder, Email campaigns, waitlist, kanban 등 일부 기능은 제품 요구사항이 없을 시 재도입하지 않도록 제거되었습니다.
• 설치 및 배포: npm install, npm run dev 등으로 로컬 개발 환경을 설정하고, Supabase 마이그레이션 SQL 실행, Supabase 인증 설정, Stripe 키 연동, 배포 서버에 환경 변수 설정 등의 과정을 거쳐 웹사이트를 구축합니다.

시사점

ToolDir 템플릿은 Next.js, Supabase, Stripe와 같은 최신 기술 스택을 활용하여 개발자가 디렉토리 리스팅 웹사이트를 빠르고 효율적으로 구축하고 온라인 수익을 창출할 수 있도록 지원합니다.