ZOYKUHot Board

barty-bart/nextjs-supabase-shadcn-boilerplateDocumentação

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

Aviso de idioma:A documentação traduzida não está disponível. Exibindo o original oficial em inglês.
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

Espelho arquivado do repositório oficial no GitHub · Ver no GitHub
Data do snapshot: 2026-11-09