How Next.js Performance Lessons Built a Fast Brat Image Generator

A minimalist design approach rarely leads to technical challenges—but building a free brat image generator defied expectations. The tool, inspired by Charli XCX’s album aesthetic, lets users generate bold, lowercase text on solid backgrounds without accounts or watermarks. Behind the scenes, it exposed critical performance lessons for Next.js applications relying on canvas rendering and client-side interactivity.

The Brat Aesthetic Meets Next.js Performance

The brat aesthetic thrives on simplicity: bold, lowercase typography on a single-color background. Translating that simplicity into a functional tool required balancing client-side rendering with server-side expectations. The generator supports custom text, background colors, aspect ratios, emoji overlays, and high-resolution PNG exports up to 3000px—all without user authentication.

The core architecture relies on Next.js 16 with the App Router, paired with a vanilla TypeScript canvas engine. Unlike traditional server-rendered components, the canvas component depends entirely on browser APIs unavailable during server-side rendering. This dependency forced a deep dive into dynamic imports and layout stabilization.

Dynamic Imports and LCP Stability: A Critical Fix

The canvas module was loaded using Next.js’s dynamic import utility with server-side rendering disabled:

const BratGeneratorLazy = dynamic(
  () => import('./BratGenerator'),
  { ssr: false }
);

While this approach worked flawlessly on mobile devices, desktop crawlers encountered a critical issue. Googlebot, scanning the page, detected a large empty space where the tool should render. Without reserved space, the layout shifted unpredictably upon component load, harming Largest Contentful Paint (LCP) metrics.

The solution was a minimal structural adjustment:

<div style={{ minHeight: '520px', position: 'relative', width: '100%' }}>
  <BratGeneratorLazy />
</div>

This wrapper ensured the page maintained structural integrity during hydration. The position: relative and width: 100% properties prevented layout shifts and stacking context conflicts—especially important when the component interacted with sticky headers during scrolling.

Canvas Rendering and Memory Efficiency: Undo/Redo Pitfalls

User interactions like text edits and sticker placements required undo/redo functionality. Initially, the implementation cloned background images on every state snapshot:

// Original flawed implementation
bgImage: s.bgImage ? (() => {
  const img = new Image();
  img.src = s.bgImage!.src;
  return img;
})() : null,

This approach created a new HTMLImageElement instance per keystroke, triggering heap churn and UI thread stuttering—particularly noticeable on mid-range mobile devices. The fix involved direct reference assignment instead of re-instantiation:

// Optimized implementation
bgImage: s.bgImage,

By reusing the existing image object, the tool eliminated unnecessary DOM operations while preserving undo/redo functionality. The change significantly reduced memory pressure and improved rendering responsiveness.

Pointer Event Management and StrictMode Bugs

Global pointer event listeners were added to handle sticker dragging:

window.addEventListener("pointermove", onPointerMove);
window.addEventListener("pointerup", onPointerUp);
window.addEventListener("pointercancel", onPointerUp);

However, React’s StrictMode in development mounts components twice. Without cleanup, duplicate event handlers accumulated, causing double-trigger issues when users released dragged elements. The solution involved explicit removal before re-adding listeners:

// Safe event listener setup
window.removeEventListener("pointermove", onPointerMove);
window.removeEventListener("pointerup", onPointerUp);
window.removeEventListener("pointercancel", onPointerUp);

window.addEventListener("pointermove", onPointerMove);
window.addEventListener("pointerup", onPointerUp);
window.addEventListener("pointercancel", onPointerUp);

This pattern ensures consistent behavior across development and production environments.

Content Security Policy: Debugging Subtle CSP Violations

Implementing CSP headers in next.config.ts introduced unexpected issues with Microsoft Clarity analytics. The service loads scripts from scripts.clarity.ms but sends data to t.clarity.ms. Both subdomains required allowlisting:

// Required CSP directives
script-src 'self' scripts.clarity.ms;
connect-src 'self' t.clarity.ms;

The lesson: always inspect network requests in browser DevTools after CSP changes. Console warnings explicitly indicate blocked domains, enabling targeted fixes.

Routing Changes and Cache Management Pitfalls

Early in development, multilingual routing used dynamic segments like /[lang]/generator. After removing these routes, a stale TypeScript cache persisted in .next/dev/types/validator.ts, causing build errors. The resolution was straightforward but costly in debugging time: delete the .next directory and rebuild.

Clear cache directories whenever structural routing changes occur. This prevents type mismatches and inconsistent builds.

Key Takeaways for Canvas-Based Next.js Tools

• Reserve space for client-side components to prevent layout shifts and LCP degradation.
• Avoid unnecessary DOM instantiation in performance-critical paths like undo/redo stacks.
• Clean up global event listeners to prevent StrictMode duplication bugs.
• Verify CSP directives against actual network requests, not assumptions.
• Prune stale caches after routing or structural changes to maintain build consistency.

The brat generator now operates efficiently across devices, proving that minimalist design and robust performance engineering can coexist. For developers building canvas-heavy Next.js applications, the dynamic import + reserved space pattern remains a valuable pattern worth adopting.