# nextjs-shadcn-study

**Repository Path**: playground_2/nextjs-shadcn-study

## Basic Information

- **Project Name**: nextjs-shadcn-study
- **Description**: next.js和shadcn学习项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-04
- **Last Updated**: 2026-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# My Next App

A modern, full-featured Next.js application built with TypeScript, Tailwind CSS, and shadcn/ui components. This project demonstrates best practices for building scalable web applications with server-side rendering, type safety, and a beautiful UI.

## 🚀 Tech Stack

### Core Framework
- **Next.js 16** - React framework with App Router, SSR, and SSG capabilities
- **React 19** - Latest React with Server Components support
- **TypeScript 5** - Type-safe development

### Styling & UI
- **Tailwind CSS 4** - Utility-first CSS framework
- **shadcn/ui** - Reusable component library built on Radix UI
- **Radix UI** - Headless UI primitives for accessibility
- **Lucide React** - Beautiful & consistent icon library
- **Geist Font** - Modern font family optimized for web via `next/font`

### State Management & Forms
- **React Hook Form** - Performant forms with easy validation
- **Zod** - TypeScript-first schema validation
- **TanStack Table** - Powerful table/data grid functionality

### Theme & Utilities
- **next-themes** - Dark/light mode theme switching
- **class-variance-authority** - Component variant management
- **tailwind-merge** - Smart Tailwind class merging
- **clsx** - Conditional className utility

### Development Tools
- **ESLint 9** - Code linting and quality
- **PostCSS** - CSS transformation

## ✨ Features

- ✅ **App Router Architecture** - Modern file-based routing with React Server Components
- ✅ **Dark/Light Mode** - Seamless theme switching with persistence
- ✅ **Data Tables** - Advanced table features with sorting, filtering, and pagination
- ✅ **Form Validation** - Type-safe forms with Zod schema validation
- ✅ **Responsive Design** - Mobile-first responsive layouts
- ✅ **Type Safety** - End-to-end TypeScript coverage
- ✅ **Optimized Fonts** - Automatic font optimization with zero layout shift
- ✅ **Component Library** - Pre-built accessible UI components

## 📁 Project Structure

```
my-next-app/
├── app/                    # Next.js App Router
│   ├── payments/          # Payments feature module
│   │   ├── page.tsx       # Payments page
│   │   ├── columns.tsx    # Table column definitions
│   │   ├── data-table.tsx # Reusable data table component
│   │   └── ...            # Table utilities
│   ├── layout.tsx         # Root layout with providers
│   ├── page.tsx           # Home page
│   └── globals.css        # Global styles
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   │   ├── button.tsx
│   │   ├── dialog.tsx
│   │   ├── form.tsx
│   │   ├── table.tsx
│   │   └── ...           # More UI components
│   ├── mode-toggle.tsx   # Theme switcher
│   └── theme-provider.tsx # Theme context provider
├── lib/                  # Utility functions
│   └── utils.ts          # Helper functions
├── public/               # Static assets
├── components.json       # shadcn/ui configuration
├── next.config.ts        # Next.js configuration
├── tsconfig.json         # TypeScript configuration
└── package.json          # Dependencies and scripts
```

## 🛠️ Getting Started

### Prerequisites

- Node.js 18+ (or Bun)
- npm, yarn, pnpm, or bun package manager

### Installation

1. Clone the repository:
```bash
git clone <repository-url>
cd my-next-app
```

2. Install dependencies:
```bash
npm install
# or
yarn install
# or
pnpm install
# or
bun install
```

3. Run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

4. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.

## 📝 Available Scripts

- `npm run dev` - Start development server with hot reload
- `npm run build` - Build production-ready application
- `npm run start` - Start production server
- `npm run lint` - Run ESLint for code quality checks

## 🎨 Customization

### Adding New Components

This project uses [shadcn/ui](https://ui.shadcn.com/) for UI components. To add new components:

```bash
npx shadcn@latest add [component-name]
```

### Modifying Theme

Edit `app/globals.css` to customize Tailwind CSS variables and design tokens. The theme supports both light and dark modes via CSS variables.

### Configuration Files

- **`components.json`** - shadcn/ui component configuration
- **`next.config.ts`** - Next.js framework settings
- **`tsconfig.json`** - TypeScript compiler options with path aliases (`@/*`)
- **`eslint.config.mjs`** - ESLint rules and plugins

## 📚 Learning Resources

- [Next.js Documentation](https://nextjs.org/docs) - Official Next.js guides and API reference
- [Learn Next.js](https://nextjs.org/learn) - Interactive tutorial
- [React Documentation](https://react.dev/) - React concepts and patterns
- [Tailwind CSS Docs](https://tailwindcss.com/docs) - Utility-first CSS framework
- [shadcn/ui](https://ui.shadcn.com/) - Component library documentation
- [TypeScript Handbook](https://www.typescriptlang.org/docs/) - Type system reference

## 🚢 Deployment

The easiest way to deploy is using the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme):

1. Push your code to GitHub
2. Import your repository to Vercel
3. Deploy with automatic CI/CD

For other deployment options, see the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying).

## 🤝 Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

## 📄 License

This project is open source and available under the MIT License.

---

Built with ❤️ using Next.js, TypeScript, and shadcn/ui