How I built a Next.js app that creates images of you using AI 🎨

I'm releasing Amazing.photos, an AI image generation tool built with Next.js - and completely open-source. I'm excited to put an open-source project into the world!

But I hear you say: "aren't there loads of AI photo generators out there?"

Yes there are. Enough to fill a whole gallery of uncanny valley art.

That said, here are some of Amazing.photos distinguishing features:

Distinguishing features

The Tech Stack 🥩

Let’s get into the meat of the tech. Here's the complete technology stack I used: This stack is relatively simple, quick to host, and cheap to run.

The tech stack as a diagram:

A criticism of Next.js

I'm critical of Next.js at the moment (App Router).

I've spent a lot of time building with Next.js (App Router), including our startup's app over the past year. I'm now unenthusiastic about using Next.js for future products.

Even in my small amazing.photos codebase, the developer experience worsened quickly after my app grew and Next's hot-module reloading started to slow.

This led to 5 second delays on most page loads in my very small codebase when developing. Dev environment speed is a very important factor for me. Next.js is not the best for this.

For next time, I'll likely use Django Ninja + Pyright for strong typed python + React. My free guide to create an app using this stack (excluding the typing) is here: Use React with Django Ninja (including Auth) in 15 mins ⚡️.

How does amazing.photos work?

The workflow is straightforward:

1. User uploads photos: A user logs in using Google sign-in and uploads at least 5 photos of themselves (>20 photos is better - the AI needs choices, like a picky art critic)

2. AI model training: I send the photos to Replicate to train the Flux fast trainer model (where the magic happens, aka expensive GPU time)

3. Training completion webhook: Once training is finished, Replicate sends a webhook to my backend

4. Sample generation: The backend generates about 12 free images of the user as samples

5. Email notification: The backend emails the user with these sample images and a link to access their personalized model

6. Custom generation: Users can view the initial images and generate new ones using any custom prompts they like

To train a different model, users just repeat the process.

How does payment work?

The app uses Stripe for payments. I created a tutorial here: How to add Stripe to Next.js in 5 minutes 💰.

How does authentication work?

The app uses Google sign-in for auth, with Better Auth (which I highly recommend). See my guide here: The simplest way to add Google sign-in to your Next.js app.

Current limitations and improvements

Things to improve:

• Parallelize generation: Generation is currently synchronous, meaning users can only generate one image at a time, which takes about 20 seconds (close to eternity in internet time, I know - it's on the list)

Development notes

The UI was built with a mix of my own coding and AI assistance. While AI coding is very fast, it can make significant mistakes, so it's important to act as the architect guiding the process rather than blindly accepting its output.

As it's open source, feel free to fork it and submit a pull request for any cool features.

App and code

Next up → I'll launch this on Product Hunt 🚀 (wish me luck in the startup hunger games)