# NextJS-setup

- Author: Your Name
- Repository: mrehanamjad/SDD-Evolution-of-Todo-GIAIC-HACKATHON-II
- Version: 20260208211145
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-08
- Source: https://github.com/mrehanamjad/SDD-Evolution-of-Todo-GIAIC-HACKATHON-II
- Web: https://mule.run/skillshub/@@mrehanamjad/SDD-Evolution-of-Todo-GIAIC-HACKATHON-II~NextJS-setup:20260208211145

---

# Next.js 15 Project Setup Skill

## Purpose
Initialize a production-ready Next.js 15+ project with App Router, TypeScript, Tailwind CSS, and shadcn/ui.

## When to Use
- Starting a new Next.js frontend project
- Setting up modern React application
- Configuring TypeScript and Tailwind
- Adding component library (shadcn/ui)

## Prerequisites
- Node.js 20+ installed
- npm or pnpm package manager
- Project root directory created

## Instructions

### Step 1: Initialize Next.js Project
See [structure.md](structure.md)

### Step 2: Project Structure
See [structure.md](structure.md)

### Step 3: Configure Environment Variables
See [configuration.md](configuration.md)

### Step 4: Configure Next.js
See [configuration.md](configuration.md)

### Step 5: Configure Tailwind CSS
See [configuration.md](configuration.md)

### Step 6: Update Global Styles
See [configuration.md](configuration.md)

### Step 7: Create Root Layout
See [structure.md](structure.md)

### Step 8: Install shadcn/ui
See [components.md](components.md)

### Step 9: Install Additional Dependencies
See [configuration.md](configuration.md)

### Step 10: Create Utility Functions
See [structure.md](structure.md)

### Step 11: Create TypeScript Types
See [structure.md](structure.md)

### Step 12: Create Example Page
See [structure.md](structure.md)

## Components
See [components.md](components.md)

## Validation Checklist
- [ ] Next.js 15+ installed with TypeScript
- [ ] App Router configured (not Pages Router)
- [ ] Tailwind CSS working
- [ ] shadcn/ui components installed
- [ ] Environment variables configured
- [ ] Project structure created
- [ ] Global styles applied
- [ ] TypeScript types defined
- [ ] Dev server starts: `npm run dev`
- [ ] Page renders at http://localhost:3000

## Testing
```bash
# Run dev server
npm run dev

# Build for production
npm run build

# Type check
npm run type-check
```

## Output Files
- Complete Next.js 15 project structure
- Configured TypeScript and Tailwind
- shadcn/ui components installed
- Environment configuration ready

## Next Steps
After setup:
1. Use **API Client Generator** skill to create backend integration
2. Use **Better Auth Integration** skill for authentication
3. Build task management UI components