DEV Community: Maegami

I got a real Next.js store to 98 on mobile PageSpeed. Here is what actually moved it, and the trap that fooled me.

Maegami — Sat, 04 Jul 2026 15:38:34 +0000

I run my own Next.js 14 store (link at the end). It was sitting around the low 50s on mobile, LCP over 10 seconds. It is now 98 on mobile PSI, LCP about 3.5s. This is a live store with real traffic, not a demo, so every fix had to survive production.

What actually moved the number, roughly in order of impact:

Self-hosted the fonts. 15 woff2 files local, inline @font-face, preload only the critical cyrillic and latin subsets. This killed every external font connection and was the single biggest win.

PNG to WebP everywhere. Category images went from about 11MB to 0.5MB, blog covers from 37MB to 1.3MB.

Deferred the iframe embeds and the hero video to window.load. Their runtimes were stealing the main thread from first paint.

Dropped the reveal animations on the above-fold hero.

The trap: my local Lighthouse kept flapping between 63 and 99 on the exact same build. I burned an hour chasing a regression that did not exist. It was my laptop under load, not the page. A cold PSI run was the real number. Lab scores lie under local CPU pressure, trust the field.

Live store: https://euphoria-parfum.com.ua. Write-up of the build: https://maegamidev.vercel.app/euphoria.html. Happy to answer anything.

Adding a third language to a static HTML site: ~60 lines of vanilla JS

Maegami — Fri, 03 Jul 2026 13:40:46 +0000

Yesterday a lead from Ukraine asked to see my work. My case study was in Russian. Sending a Russian-language portfolio to a Ukrainian client is a good way to lose them before hello.

The site is static HTML on Vercel. No framework, no build step, and I wanted to keep it that way. An i18n library for two pages felt like overkill, so here's what I did instead.

Russian stays in the DOM, other languages are dictionaries

The page source is the Russian version. On load I walk all text nodes once and remember their original value, whitespace and a normalized key:

function norm(s){ return s.replace(/[\s ]+/g,' ').trim(); }
var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
var nodes = [];
while (walker.nextNode()) {
  var n = walker.currentNode;
  var key = norm(n.nodeValue);
  if (!key) continue;
  n.__ru = n.nodeValue; n.__key = key;
  n.__lead = n.nodeValue.match(/^[\s ]*/)[0];
  n.__trail = n.nodeValue.match(/[\s ]*$/)[0];
  nodes.push(n);
}

EN and UK are plain objects keyed by the normalized Russian string. Switching languages is rewriting nodeValue, nothing else:

function setLang(lang, persist){
  var dict = lang === 'en' ? EN : (lang === 'uk' ? UK : null);
  nodes.forEach(function(node){
    node.nodeValue = dict ? (node.__lead + (dict[node.__key] || node.__ru) + node.__trail) : node.__ru;
  });
  document.documentElement.lang = lang;
  if (persist) localStorage.setItem('langManual', '1');
  localStorage.setItem('lang', lang);
}

If a string is missing from the dictionary it stays Russian, so a half-translated page still works.

Detection order matters more than detection

manual choice from localStorage wins forever
otherwise country by IP (ipapi.co free tier, 1.5s timeout), UA gets Ukrainian
if the IP call is slow or blocked, navigator.language already picked a language, so nothing blinks

The first version waited for the IP response and the page sat in Russian for a second. Felt broken. Render from browser language immediately, treat geo as an upgrade.

Limitations, honestly: this only swaps text nodes. Attributes like placeholder or aria-label need separate handling, and if one sentence is split across several tags the keys get ugly. For a portfolio it's more than enough.

Live: https://maegamidev.vercel.app (dropdown top right). The case study it was built for: https://maegamidev.vercel.app/euphoria.html

Sent the links to the lead the same evening.

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 🙏