nextjs-performance

Solid

Expert Next.js performance optimization skill covering Core Web Vitals, image/font optimization, caching strategies, streaming, bundle optimization, and Server Components best practices. Use when optimizing Next.js applications for Core Web Vitals (LCP, INP, CLS), implementing next/image and next/font, configuring caching with unstable_cache and revalidateTag, converting Client Components to Server Components, implementing Suspense streaming, or analyzing and reducing bundle size. Supports Next.js 16 + React 19 patterns.

Web & Frontend 263 stars 31 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 89/100

Stars 20%
81
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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/image` for faster loading - Configure font optimization with `next/font` to 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 - Configure metadata and SEO for better search engine visibility - Optimize API route handlers for better performance - Apply Next.js 16 and React 19 modern patterns ### Coverage Areas - **Core Web Vitals optimization** (LCP, INP, CLS) - **Image optimization** with `next/image` - **Font optimization** with `next/font` - **Caching strategies** (`unstable_cache`, `revalidateTag`, ISR) - **Server Com...

Details

Author
giuseppe-trisciuoglio
Repository
giuseppe-trisciuoglio/developer-kit
Created
7 months ago
Last Updated
1 weeks ago
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

33 Updated 2 days ago
tdimino
Web & Frontend Listed

react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

335 Updated today
aiskillstore
Web & Frontend Featured

react-best-practices

Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Use when optimizing React apps, reviewing performance, or refactoring components.

27,705 Updated today
davila7
Web & Frontend Listed

web-performance

Use this skill whenever the user is improving Core Web Vitals or page load performance, or mentions slow pages, PageSpeed Insights / Lighthouse failures, LCP/CLS/INP scores, bundle size, image/font optimization, or third-party script impact. Covers Core Web Vitals, image and font optimization, JavaScript bundle size, CSS build size, CDN caching, third-party JavaScript impact, and measurement tools. Skip for backend latency tuning, database query optimization, or CI build speed.

20 Updated 1 weeks ago
ziniman
API & Backend Solid

performance

Comprehensive performance specialist covering analysis, optimization, load testing, and framework-specific performance. Use when identifying bottlenecks, optimizing code, conducting load tests, analyzing Core Web Vitals, fixing memory leaks, or improving application performance across all layers (application, database, frontend). Includes React-specific optimization patterns.

335 Updated today
aiskillstore