nextjs-fsd-starter

# Next.js FSD Starter

Create a production-ready Next.js project with FSD architecture and modern tooling.

## Stack

- Next.js (latest, App Router)
- TypeScript
- Tailwind CSS
- ESLint (flat config) with FSD rules
- Prettier
- Husky (pre-commit lint)
- pnpm
- date-fns (date utilities)
- zustand (state management)
- es-toolkit (modern lodash alternative)
- react-hook-form (form handling)
- tw-animate-css (Tailwind animations)
- lucide-react (icons)
- @radix-ui (headless UI primitives)
- tailwind-merge (class merging)
- clsx (conditional classes)
- zod (schema validation)
- @tanstack/react-query (data fetching)

## Setup Process

### 1. Create Next.js Project

```bash
pnpm create next-app@latest <project-name> --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --use-pnpm
cd <project-name>
```

### 2. Install Dependencies

```bash
# Dev dependencies
pnpm add -D prettier eslint-config-prettier eslint-plugin-prettier husky lint-staged prettier-plugin-tailwindcss

# ESLint 9 dependencies
pnpm add -D @eslint/js typescript-eslint eslint-plugin-react-hooks @next/eslint-plugin-next eslint-import-resolver-typescript eslint-plugin-import

# React Compiler
pnpm add -D babel-plugin-react-compiler eslint-plugin-react-compiler

# Runtime dependencies
pnpm add date-fns zustand es-toolkit react-hook-form tw-animate-css lucide-react tailwind-merge clsx zod @hookform/resolvers @tanstack/react-query @tanstack/react-query-devtools

# Radix UI primitives
pnpm add @radix-ui/react-dialog @radix-ui/react-popover @radix-ui/react-tooltip @radix-ui/react-select @radix-ui/react-checkbox @radix-ui/react-slot @radix-ui/react-tabs
```

### 3. Enable React Compiler

Update `next.config.ts` to enable React Compiler:

```typescript
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  reactCompiler: true,
};

export default nextConfig;
```

### 4. Create FSD Directory Structure

Copy `assets/fsd-structure/` to `src/` directory. The structure uses `.gitkeep` fi