I built a Next.js 16 store starter for perfume & cosmetics (and learned a few things)

Maegami — Tue, 30 Jun 2026 00:55:04 +0000

Honestly a bit scary to post this. I'm a self-taught dev, and Aura is the first thing I've actually finished and put up for sale. It's a Next.js 16 storefront starter, but I didn't want to make "another generic shop", so I built it specifically for perfume and cosmetics.

Live demo: https://aura-starter.vercel.app

Here's why I niched it, and two things that confused me while building, in case it helps someone.

Why perfume & cosmetics

I kept noticing fragrance and cosmetics aren't sold like normal products:

People buy decants first (2, 5 or 10 ml of a scent) before paying for a full bottle. So instead of a product photo, my hero is three little apothecary vials, filled to different heights by size.
Every fragrance has a note pyramid (top / heart / base). Buyers actually care how it opens and where it lands.
Cosmetics need real shade swatches and a short ingredients list.

Most templates ignore all that. I figured building around how people actually buy is what makes it worth something.

Thing that confused me #1: React 19 and refs

I have a hover panel that slides in with product info, and I wanted it to keep showing the last product while it slides away. I reached for a ref:

const lastShown = useRef(null);
if (active) lastShown.current = active; // React 19 yelled at me here

Turns out React 19 has a new lint rule that won't let you read or write refs during render. Took me a while to get it. The fix was just to keep it in state and set it in the handler:

const [shownSlug, setShownSlug] = useState(null);
const open = (slug) => { setActiveSlug(slug); setShownSlug(slug); };

Cleaner in the end, honestly.

Thing that confused me #2: making graphics work in dark mode

The decant vials are just divs, not images. I didn't want to draw them twice for light and dark, so instead of fixed colors I used CSS variables for the fill:

style={{ background: 'linear-gradient(180deg, var(--accent), var(--accent-strong))' }}

Since the variable flips with the theme, the same vials just work in both. No dark: copies, no second SVG. Small thing, but it made me happy.

Also, Next 16 + Tailwind v4

If you're starting fresh: params and searchParams are promises now (you await them), and Tailwind v4 config lives in globals.css. Took me a minute coming from older versions.

That's it really. It's typed, has tests, light/dark, and the hover thing.

Demo: https://aura-starter.vercel.app
If it's useful to anyone, it's up here: https://maegami.gumroad.com/l/aura/LAUNCH

This is genuinely my first time selling something I made, so any feedback (design, code, whatever) would mean a lot. Thanks for reading 🙏

DEV Community: Maegami

I built a Next.js 16 store starter for perfume & cosmetics (and learned a few things)

Why perfume & cosmetics

Thing that confused me #1: React 19 and refs

Thing that confused me #2: making graphics work in dark mode

Also, Next 16 + Tailwind v4