Building an AI Image Generation SaaS with Next.js and TypeScript
I recently launched aipose.ai, an AI-powered image and video generation platform offering 20+ creative tools. Here's how I built it and the key decisions I made.
What It Does
The platform provides various AI-powered features:
AI Headshot Generator with 100+ professional styles
Image Editing: Background removal, object removal, image expansion, recoloring
Portrait Tools: Outfit changer, expression modifier, hairstyle changer, makeup generator
Video Generation: Text-to-video and image-to-video
Special Effects: Baby predictor, age progression, gender swap, and more
Tech Stack
Core Technologies
// Next.js 15 with App Router for great SEO
export async function generateMetadata(): Promise<Metadata> {
return {
title: "AI Image & Video Generator",
description: "Create stunning AI images and videos",
keywords: ["AI image generator", "AI video generator"],
};
}
Why This Stack?
Next.js 15: Server components, excellent SEO, built-in optimizations
TypeScript: Type safety across the entire codebase
Turborepo: Monorepo for better code organization
Shadcn UI + Tailwind: Fast, customizable UI development
Prisma: Type-safe database access
Better-auth: Modern authentication
Stripe: Payment processing
Monorepo Architecture
poseai-app/
├── apps/web/ # Next.js application
├── packages/
│ ├── ai/ # AI service integrations
│ ├── api/ # API routes
│ ├── database/ # Prisma schema
│ ├── payments/ # Stripe integration
│ └── ...
This structure keeps code modular and reusable across different parts of the application.
Key Features
1. AI Headshot Generator with 100+ Styles
The standout feature is the headshot generator with styles ranging from "Corporate Business" to "Cyberpunk":
export interface GenerateHeadshotParams {
imageData: string;
style: HeadshotStyle; // 100+ options
backgroundType: BackgroundType;
quantity: number;
}
const HEADSHOT_STYLES = [
{
name: "Corporate Business",
style: "corporate-business",
prompt: "Professional corporate headshot with business suit..."
},
{
name: "Cyberpunk",
style: "cyberpunk",
prompt: "Futuristic cyberpunk portrait with neon lighting..."
},
// ... 98 more styles
];
2. Modular AI Service Design
Each AI feature is a self-contained module:
// packages/ai/lib/ai-headshot.ts
export async function generateHeadshotPack(
params: GenerateHeadshotParams
): Promise<GeneratedHeadshot[]> {
const prompt = buildHeadshotPrompt(params.style, params.backgroundType);
return await generateImageWithGemini({ ...params, prompt });
}
3. Credit System
Simple but effective credit-based pricing:
await prisma.$transaction(async (tx) => {
const user = await tx.user.findUnique({ where: { id: userId } });
if (user.credits < amount) {
throw new Error('Insufficient credits');
}
await tx.user.update({
where: { id: userId },
data: { credits: { decrement: amount } }
});
});
Challenges & Solutions
Image Processing Performance
Problem: Large image uploads causing timeouts
Solution: Client-side compression before upload
AI Service Reliability
Problem: Third-party AI services can fail
Solution: Retry logic with exponential backoff
Cost Control
Problem: AI API calls are expensive
Solution: Credit system + rate limiting + usage monitoring
Performance Optimizations
- WebP images with Next.js Image component
- Dynamic imports for heavy components
- API route caching
- CDN for static assets
Deployment
# Environment management with dotenv-cli
pnpm dev
# Stripe webhooks (local testing)
stripe listen --forward-to localhost:3000/api/webhooks/payments
# Database management
npx prisma studio
Lessons Learned
Monorepo pays off: Initial setup takes time, but organization improves dramatically
Prompt engineering matters: Well-crafted prompts improve AI output quality 10x
User experience is critical: Loading states, clear errors, mobile optimization
Monitor costs: AI APIs are expensive - implement usage limits and monitoring
Results
The platform now serves users with:
- 20+ AI-powered tools
- 100+ headshot styles
- Multi-language support
- Responsive design
- Smooth payment flow
What's Next
- Batch processing
- More AI models
- Public API for developers
- Mobile apps
- Community features
Conclusion
Building an AI SaaS is challenging but rewarding. Key takeaways:
- Choose battle-tested tech (Next.js + TypeScript)
- Keep services modular
- Optimize for performance early
- Monitor costs carefully
- Prioritize UX
Check out aipose.ai to see it in action!
Questions? Drop them in the comments below!