ZOYKUHot Board

barty-bart/nextjs-supabase-shadcn-boilerplate기술 문서

Minimal Next.js + Supabase + shadcn/ui boilerplate with auth and dashboard sidebar

언어 대체 안내:해당 저장소의 한국어 문서가 제공되지 않아 공식 영문 원본(English)으로 표시됩니다.
npm i nextjs-supabase-shadcn-boilerplate

Next.js + Supabase + shadcn/ui Boilerplate

A minimal, production-ready starter template for building internal tools and web apps.

Features

  • ✅ Next.js 16 - App Router, React Server Components
  • ✅ Supabase - Auth, database, storage
  • ✅ shadcn/ui - Beautiful, accessible UI components
  • ✅ Tailwind CSS - Utility-first styling
  • ✅ TypeScript - Type safety
  • ✅ Collapsible Sidebar - Ready-to-use dashboard layout
  • ✅ Auth flows - Login, logout working

Prerequisites

  • Node.js 20+ (node -v to check)
  • A Supabase account (supabase.com)

Quick Start

  1. Clone the repo
   git clone https://github.com/Barty-Bart/nextjs-supabase-shadcn-boilerplate.git
   cd nextjs-supabase-shadcn-boilerplate
  1. Install dependencies
   npm install
  1. Set up environment variables
   cp .env.example .env.local

Then edit .env.local with your Supabase credentials:

   NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
   NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-anon-key

Get these from: Supabase Dashboard → Project Settings → API

  1. Run the dev server
   npm run dev
  1. Open http://localhost:3000

Project Structure

app/
  page.tsx              → Redirects to login or dashboard
  auth/                 → Login, signup, password reset
  dashboard/            → Protected dashboard page
    layout.tsx          → Sidebar layout
    page.tsx            → Dashboard content
components/
  app-sidebar.tsx       → Sidebar with navigation
  ui/                   → shadcn components
lib/
  supabase/             → Supabase client setup
  utils.ts              → Utility functions

Adding shadcn Components

npx shadcn@latest add [component-name]

Browse components: https://ui.shadcn.com/docs/components

Customization

  • Sidebar menu items: Edit components/app-sidebar.tsx
  • Theme/colors: Edit app/globals.css
  • Auth redirects: Edit components/login-form.tsx

License

MIT

GitHub 공식 원본 저장소에서 아카이브된 문서 미러 · GitHub 저장소 방문
동기화 기준일: 2026-11-09