DEV Community

Cover image for Building an AI Image Generation SaaS with Next.js and TypeScript
Tach Yolo
Tach Yolo

Posted on

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

#nextjs #typescript #ai #saas

AI Image Generation - aipose

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"],
  };
}
Enter fullscreen mode Exit fullscreen mode

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
│   └── ...
Enter fullscreen mode Exit fullscreen mode

This structure keeps code modular and reusable across different parts of the application.

AI Image Generation - aipose

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
];
Enter fullscreen mode Exit fullscreen mode

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 });
}
Enter fullscreen mode Exit fullscreen mode

AI Image Generation - aipose

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 } }
  });
});
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)