nextjs-optimization

What problem does it solve?

Next.js applications often struggle with Core Web Vitals, SEO visibility, and bloated bundles due to inconsistent metadata, unoptimized images/fonts, and large client-side JavaScript footprints.

Core Features & Use Cases

• Metadata optimization: ensure SEO-friendly titles, descriptions, and Open Graph via the Metadata API.
• Asset optimization: replace <img> with next/image and adopt next/font for fonts to reduce CLS.
• Bundle reduction: identify large client components, implement lazy loading, and optimize dynamic imports across routes.
• Use Case: A production Next.js site with poor Lighthouse scores gets a workflow to improve metadata, imagery, fonts, and code-splitting, resulting in faster TTFB and FCP.

Quick Start

Use the nextjs-optimization skill to audit a Next.js app in production mode and apply metadata, image/font optimizations, and bundle improvements.