# 1. Clone or copy this template
git clone https://github.com/sutthiphatchuenban/Next.js-shadcn-ui-Template.git

# 2. Install dependencies
npm install

# 3. Copy environment variables
cp .env.example .env

npm run dev

# Development
npm run dev          # Start development server

# Production
npm run build        # Build for production
npm run start        # Start production server

# Code Quality
npm run lint         # Run ESLint
npm run lint:fix     # Fix ESLint errors
npm run type-check   # Run TypeScript check
npm run format       # Format code with Prettier
npm run format:check # Check code formatting

# Maintenance
npm run clean        # Remove .next and node_modules
npm run clean:next   # Remove .next only

📦 examio
├── 📂 src/
│   ├── 📂 app/                    # Next.js App Router
│   │   ├── 📂 api/                # API routes
│   │   │   └── 📂 health/         # Health check endpoint
│   │   ├── 📄 sitemap.ts          # SEO sitemap
│   │   ├── 📄 robots.ts           # SEO robots.txt
│   │   ├── 📄 manifest.ts         # Web app manifest
│   │   ├── 📄 opengraph-image.tsx # Open Graph image
│   │   ├── 📄 error.tsx           # Error boundary
│   │   ├── 📄 loading.tsx         # Loading UI
│   │   ├── 📄 not-found.tsx       # 404 page
│   │   ├── 📄 layout.tsx          # Root layout + metadata
│   │   ├── 📄 page.tsx            # Home page
│   │   └── 📄 globals.css         # Global styles
│   ├── 📂 components/
│   │   ├── 📂 ui/                 # shadcn/ui components
│   │   ├── 📂 providers/
│   │   │   └── 📄 theme-provider.tsx
│   │   └── 📄 mode-toggle.tsx     # Theme toggle button
│   ├── 📂 hooks/                  # Custom React hooks
│   │   ├── 📄 use-local-storage.ts
│   │   └── 📄 use-debounce.ts
│   ├── 📂 lib/
│   │   └── 📄 utils.ts            # Utility functions (cn)
│   └── 📂 types/
│       └── 📄 index.ts            # TypeScript types
├── 📂 public/                     # Static assets
├── 📄 .env.example                # Environment variables template
├── 📄 .nvmrc                      # Node.js version lock
├── 📄 components.json             # shadcn/ui config
├── 📄 next.config.ts              # Next.js config
├── 📄 prettier.config.mjs         # Prettier config
└── 📂 .vscode/                    # VS Code settings
    ├── 📄 extensions.json         # Recommended extensions
    └── 📄 settings.json           # Editor settings

import { useLocalStorage } from "@/hooks/use-local-storage"

function MyComponent() {
  const [value, setValue] = useLocalStorage("key", defaultValue)
  // ...
}

import { useDebounce } from "@/hooks/use-debounce"

function Search() {
  const [search, setSearch] = useState("")
  const debouncedSearch = useDebounce(search, 500)
  // Use debouncedSearch for API calls
}

import { useTheme } from "next-themes"

function MyComponent() {
  const { theme, setTheme } = useTheme()
  
  return (
    <button onClick={() => setTheme("dark")}>
      Switch to dark mode
    </button>
  )
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  /* ... */
}

# Add a shadcn/ui component
npx shadcn@latest add <component-name>

# Example
npx shadcn@latest add calendar

# App
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Database (if needed)
# DATABASE_URL=

# Authentication (if needed)
# NEXTAUTH_SECRET=
# NEXTAUTH_URL=

npm run build

node -v  # Should show v20.11.0 or higher

npx shadcn@latest init
# Select different base color