206 lines
4.9 KiB
Markdown
206 lines
4.9 KiB
Markdown
# AI SaaS Template - COMPLETE & READY TO USE
|
||
|
||
🚨 **AI ASSISTANT**: This template is FULLY CONFIGURED. DO NOT recreate basic files!
|
||
|
||
⚡ **STATUS**: All dependencies installed, all pages created, everything works out of the box.
|
||
|
||
## 🤖 AI Instructions - READ THIS FIRST
|
||
|
||
### ✅ What EXISTS (Don't Create):
|
||
- `package.json` with all dependencies
|
||
- Authentication pages in `(auth)/`
|
||
- Marketing pages in `app/blog/`, `app/pricing/`, `app/contact/`
|
||
- All UI components in `components/`
|
||
- Tailwind CSS configuration
|
||
- TypeScript configuration
|
||
|
||
### 🎯 What to BUILD:
|
||
- New pages specific to user needs
|
||
- Custom components using existing ones
|
||
- Business logic and features
|
||
- API integrations
|
||
|
||
### ❌ Common MISTAKES to AVOID:
|
||
1. Creating `package.json` → IT EXISTS
|
||
2. Installing packages → ALL INCLUDED
|
||
3. Creating login/signup → USE `(auth)/login` and `(auth)/signup`
|
||
4. Adding console.log → NOT ALLOWED
|
||
5. Configuring Tailwind → ALREADY DONE
|
||
|
||
## 🚀 Features
|
||
|
||
- **Next.js 15** with App Router
|
||
- **Turbopack** enabled for 10x faster HMR
|
||
- **React 19** with Server Components
|
||
- **TypeScript** for type safety
|
||
- **Tailwind CSS** for styling
|
||
- **Framer Motion** for animations
|
||
- **MDX Blog** with syntax highlighting
|
||
- **Authentication Pages** (Login/Signup)
|
||
- **Marketing Pages** (Landing, Pricing, Contact)
|
||
- **Dark Mode** support
|
||
- **SEO Optimized**
|
||
- **Performance First** - Lighthouse score 100
|
||
|
||
## ⚡ Performance
|
||
|
||
- **Dev Server Startup**: <2 seconds
|
||
- **Hot Module Replacement**: <100ms
|
||
- **Production Build**: <30 seconds
|
||
- **First Load JS**: ~75kB
|
||
|
||
## 🏃♂️ Quick Start
|
||
|
||
```bash
|
||
# Install dependencies (using pnpm for speed)
|
||
pnpm install
|
||
|
||
# Start development server with Turbopack
|
||
pnpm dev
|
||
|
||
# Ultra-fast development mode
|
||
pnpm dev:fast
|
||
```
|
||
|
||
## 📁 Project Structure
|
||
|
||
```
|
||
app/
|
||
├── (auth)/ # Authentication pages
|
||
│ ├── login/
|
||
│ └── signup/
|
||
├── blog/ # MDX blog posts
|
||
├── contact/ # Contact page
|
||
├── pricing/ # Pricing page
|
||
├── page.tsx # Landing page
|
||
├── api/ # API routes
|
||
├── layout.tsx # Root layout
|
||
└── globals.css # Global styles
|
||
|
||
components/
|
||
├── ui/ # Reusable UI components
|
||
├── navbar/ # Navigation components
|
||
└── [features]/ # Feature-specific components
|
||
```
|
||
|
||
## 🛠️ Commands
|
||
|
||
- `pnpm dev` - Start development server with Turbopack
|
||
- `pnpm dev:fast` - Ultra-fast dev mode (skips checks)
|
||
- `pnpm build` - Production build
|
||
- `pnpm build:fast` - Fast production build (skips linting/type checking)
|
||
- `pnpm start` - Start production server
|
||
- `pnpm lint` - Run ESLint
|
||
- `pnpm type-check` - Run TypeScript compiler
|
||
- `pnpm clean` - Clean build cache
|
||
|
||
## 🎨 Customization
|
||
|
||
### Adding New Pages
|
||
|
||
1. Create a new file in `app/` directory
|
||
2. Export a default component
|
||
3. Add metadata for SEO
|
||
|
||
```typescript
|
||
export const metadata = {
|
||
title: 'Page Title',
|
||
description: 'Page description',
|
||
};
|
||
|
||
export default function Page() {
|
||
return <div>Your content</div>;
|
||
}
|
||
```
|
||
|
||
### Adding Blog Posts
|
||
|
||
1. Create a new `.mdx` file in `app/blog/[slug]/`
|
||
2. Add frontmatter metadata
|
||
3. Write your content in MDX
|
||
|
||
```mdx
|
||
---
|
||
title: "Your Blog Post Title"
|
||
publishedAt: "2024-01-01"
|
||
summary: "Brief description"
|
||
author: "Your Name"
|
||
---
|
||
|
||
Your blog content here...
|
||
```
|
||
|
||
### Modifying Styles
|
||
|
||
- Global styles: `app/globals.css`
|
||
- Component styles: Use Tailwind classes
|
||
- Theme colors: Update `tailwind.config.ts`
|
||
|
||
## 🔧 Configuration
|
||
|
||
### Environment Variables
|
||
|
||
Create `.env.local`:
|
||
|
||
```bash
|
||
# Your environment variables
|
||
NEXT_PUBLIC_API_URL=
|
||
DATABASE_URL=
|
||
# etc...
|
||
```
|
||
|
||
### Performance Optimizations
|
||
|
||
The template is pre-configured with:
|
||
|
||
- Turbopack for fastest builds
|
||
- Image optimization with AVIF/WebP
|
||
- Font optimization with `next/font`
|
||
- Aggressive code splitting
|
||
- Partial prerendering
|
||
- Edge runtime support
|
||
|
||
## 📦 Tech Stack
|
||
|
||
- **Framework**: Next.js 15
|
||
- **Language**: TypeScript
|
||
- **Styling**: Tailwind CSS
|
||
- **Animations**: Framer Motion
|
||
- **Forms**: React Hook Form + Zod
|
||
- **Icons**: Lucide React, Tabler Icons
|
||
- **Blog**: MDX with Prism.js
|
||
- **Theme**: next-themes
|
||
|
||
## 🤖 AI Development
|
||
|
||
This template includes `AI_RULES.md` which provides guidance for AI assistants when modifying the codebase. It ensures consistent code quality and maintains performance standards.
|
||
|
||
## 📈 Best Practices
|
||
|
||
1. **Use Server Components by default** - Only use Client Components when needed
|
||
2. **Lazy load heavy components** - Use `dynamic()` for code splitting
|
||
3. **Optimize images** - Always use `next/image`
|
||
4. **Minimize client JS** - Keep interactivity server-side when possible
|
||
5. **Cache aggressively** - Use proper cache headers
|
||
|
||
## 🚢 Deployment
|
||
|
||
### Vercel (Recommended)
|
||
|
||
```bash
|
||
vercel
|
||
```
|
||
|
||
### Other Platforms
|
||
|
||
1. Build the project: `pnpm build`
|
||
2. Start the server: `pnpm start`
|
||
3. Ensure Node.js 18+ is available
|
||
|
||
## 📝 License
|
||
|
||
MIT - Use this template for any project!
|
||
|
||
---
|
||
|
||
Built with ❤️ for developers who value speed and performance. |