Building an AI Hairstyle Try-On App with Next.js

I recently launched AI Hairstyle Changer—a web application that lets you

preview a new hairstyle on your own photo before deciding on a haircut.

👉 Online Demo: https://hairstyleaichanger.com/

What I Built

The core workflow is simple:

1. Upload a selfie (front-facing photos are best).

2. Choose a hairstyle (or enter a suggestion).

3. Generate a result image.

4. Save to history (and optionally request publication).

I intentionally designed the user experience with a "prompt-first" approach: users should always see the prompts they are using.

This prevents confusion between the "category" and

the actual instructions to the model.

Product Constraints I Consider "Non-Negotiationable"

1) No Changing the Person

If a user uploads their own face, the output must maintain the same identity.

A "cool hairstyle" is meaningless if it looks like someone else's.

Therefore, I made "maintaining identity" a hard rule: system prompts will add

strict constraints, such as:

• Only change hairstyle

• Keep face/facial features/skin tone/expression/pose/background

unchanged

• Avoid using beauty filters, facial retouching, face swapping, changing gender/age, etc.

These restrictions are enforced on the server side, so the client cannot bypass them.

2) Cost Control and Anti-Abuse

Image editing is costly. I designed a simple free policy:

• Login required

• Logged-in users receive 3 free trials, after which a paid trial is required.

While not perfect, it significantly reduces anonymous abuse and allows

real users to quickly gain an "aha" moment.

3) Maintain SEO friendliness and avoid over-design

I created a /ideas directory containing hairstyle pages for search intent:

• /ideas for browsing

• /ideas/{slug} for specific hairstyle themes

I maintain consistency in canonical URLs and avoid indexing filter/search result pages.

Hairstyle Preview：

Technology Stack

I initially used ShipAny (an AI SaaS template based on Next.js), and then did extensive customization:

Including:

• Next.js application routing (React 19)

• next-intl for internationalization (i18n)

• Drizzle ORM + Postgres

• Cloudflare R2 for storing generated images

• FAL (image editing) for changing hairstyles

• Creem for payments (subscription + one-time package)

• Vercel for deployment

Architecture (Overview)

• Client uploads image → Backend stores it in R2

• Client sends "hairstyle + hint" → Server merges according to strict

identity constraints

• Server calls image model

• Server stores generated image in R2

• Save generation history (for history and administrator review)

For free users, I add a watermark upon upload so paid users get a clean

result.

What Surprised Me

"Hint Presets" Need to Be Very Specific

If two hairstyle hints are too vague in their description of the hair, the result will look

almost identical. Even if the model is technically feasible, users will feel the product is "unprofessional."

My Solution: Treat each hairstyle preset as a "specification":

• Length + Parting + Bangs + Volume + Outline

• Explicitly add "Avoid…" to exclude similar styles

Hairstyle Preview：

Some Small SEO and Sharing Details Matter

Some catalogs scrape Open Graph tags. If your og:image is still

a template preview image, the product looks incomplete.

I replaced the default OG preview image and added a version number (?v=2) to force

the scraper to refresh the cached preview image.

Next Steps

• A more comprehensive hairstyle library (more choices, less duplication)

• Favorites and collections

• Improved backend user content moderation tools

• Performance optimization (mobile LCP optimization)

• Support for more languages ​​(besides English and Chinese)

If you are developing an AI consumer application, my most important advice is: **When designing,

first and foremost, earn the user's trust.** If the model's output changes the user,

then the product will immediately lose credibility.

Thank you for reading—feel free to ask questions.