Nextjs Performance

This is the performance optimization reference you want when your Next.js app's Lighthouse score is tanking or Core Web Vitals are failing. It covers the usual suspects: converting Client Components to Server Components, setting up next/image with priority flags for LCP, implementing unstable_cache with revalidateTag for smarter invalidation, and using Suspense boundaries for streaming. The examples show actual before/after code for common patterns like killing useEffect fetches in favor of async Server Components. Updated for Next.js 16 and React 19, so the patterns reflect current best practices. Most useful when you're beyond basic setup and need to systematically fix performance issues rather than guess at optimizations.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 5
skills.sh installs: 5K
GitHub stars: 369
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add giuseppe-trisciuoglio/developer-kit --skill nextjs-performance --agent claude-code

Installs into .claude/skills of the current project.

Files

Next.js Performance Optimization

Expert guidance for optimizing Next.js applications with focus on Core Web Vitals, modern patterns, and best practices.

Overview

This skill provides comprehensive guidance for optimizing Next.js applications. It covers Core Web Vitals optimization (LCP, INP, CLS), modern React patterns, Server Components, caching strategies, and bundle optimization techniques. Designed for developers already familiar with React/Next.js who want to implement production-grade optimizations.