nextjs-performance
Comprehensive Next.js performance optimization covering Core Web Vitals, modern React patterns, and production-grade techniques.
- Covers Core Web Vitals optimization (LCP, INP, CLS), image/font optimization with
next/imageandnext/font, and caching strategies usingunstable_cacheandrevalidateTag - Guides conversion of Client Components to Server Components, implementation of Suspense streaming for progressive loading, and bundle size reduction through code splitting
- Includes Next.js 16 and React 19 patterns such as async params,
use()hook for promises, anduseOptimisticfor optimistic UI updates - Provides before/after code examples, performance checklists, and common mistake patterns to avoid
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.
When to Use
Use this skill when working on Next.js applications and need to:
- Optimize Core Web Vitals (LCP, INP, CLS) for better performance and SEO
- Implement image optimization with
next/imagefor faster loading - Configure font optimization with
next/fontto eliminate layout shift - Set up caching strategies using
unstable_cache,revalidateTag, or ISR - Convert Client Components to Server Components for reduced bundle size
- Implement Suspense streaming for progressive page loading
- Analyze and reduce bundle size with code splitting and dynamic imports
More from giuseppe-trisciuoglio/developer-kit
shadcn-ui
Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.
17.1Ktailwind-css-patterns
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
10.9Kunit-test-bean-validation
Provides patterns for unit testing Jakarta Bean Validation (JSR-380), including @Valid, @NotNull, @Min, @Max, @Email constraints with Hibernate Validator. Generates custom validator tests, constraint violation assertions, validation groups, and parameterized validation tests. Validates data integrity logic without Spring context. Use when writing validation tests, bean validation tests, or testing custom constraint validators.
2.0Kreact-patterns
Provides comprehensive React 19 patterns for Server Components, Server Actions, useOptimistic, useActionState, useTransition, concurrent features, Suspense boundaries, and TypeScript integration. Generates executable code patterns, validates security for public endpoints, and optimizes performance with React Compiler or manual memoization. Proactively use when building React 19 applications with Next.js App Router, implementing optimistic UI, or optimizing concurrent rendering.
1.8Ktypescript-docs
Generates comprehensive TypeScript documentation using JSDoc, TypeDoc, and multi-layered documentation patterns for different audiences. Use when creating API documentation, architectural decision records (ADRs), code examples, and framework-specific patterns for NestJS, Express, React, Angular, and Vue.
1.2Knestjs
Provides comprehensive NestJS framework patterns with Drizzle ORM integration for building scalable server-side applications. Generates REST/GraphQL APIs, implements authentication guards, creates database schemas, and sets up microservices. Use when building NestJS applications, setting up APIs, implementing authentication, working with databases, or integrating Drizzle ORM.
1.2K