Building an AI Image Generation SaaS with Next.js and TypeScript

Tach Yolo — Wed, 12 Nov 2025 23:38:52 +0000

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!

DEV Community: Tach Yolo

Building an AI Image Generation SaaS with Next.js and TypeScript