// Next.js 15 with App Router for great SEO
export asyn...

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

1. Monorepo pays off: Initial setup takes time, but organization improves dramatically
2. Prompt engineering matters: Well-crafted prompts improve AI output quality 10x
3. User experience is critical: Loading states, clear errors, mobile optimization
4. 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!