Agent skill · software engineering · aiskillstore
nextjs-optimization
Optimize Next.js 15 applications for performance, Core Web Vitals, and production best practices using App Router patterns
Why this skill is useful
Provides specific optimization patterns and commands for Next.js 15 that enhance performance and Core Web Vitals, which the AI may not generate on its own.
What it needs
Requires grep installed locally. About 7k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Next.js 15 Optimization Skill Objective Optimize Next.js applications to achieve: Perfect Core Web Vitals scores (LCP < 2.5s, FID < 100ms, CLS < 0.1) Fast page load times and optimal rendering strategies Efficient data fetching and caching Production-ready build configuration SEO and accessibility excellence When to Use This Skill Auto-invoke when: Project uses Next.js (detected by next in dependencies) User mentions "optimize", "performance", "slow", or "Core Web Vitals" Before production deployment After adding new features or pages User requests Next.js-specific improvements Prerequisites Check Tools: Read, Grep 1. Verify Next.js version: 2. Detect App Router (Next.js 13+): Check for app/ directory Check for layout.tsx, page.tsx files 3. Detect Pages Router (Legacy): Check for pages/ directory Suggest migration to App Router Optimization Categories 1. Rendering Strategy Optimization Goal: Choose optimal rendering for each page/component Tools: Read, Grep, Edit 1.1 Server Components (Default in App Router) When to use: Data fetching from APIs/databases Heavy computation Access to backend resources Pattern: Check for violations: 1.2 Client Components When to use: Interactive UI (onClick, forms) Browser APIs (window, localStorage) React hooks (useState, useEffect) Pattern: Optimization: Keep client components small and leaf nodes 1.3 Static Generation (SSG) When to use: Content that rarely changes Marketing pages, blogs, documentation Pattern: 1.4 Dynamic Rendering with ISR When to use: Content that changes periodically E-commerce products, user profiles Pattern: 2. Image Optimization Goal: Optimize images for performance and Core Web Vitals Tools: Grep, Read, Edit 2.1 Use Next.js Image Component Find unoptimized images: Replace with: 2.2 Configure Image Domains Read next.config.js: 2.3 Lazy Loading Strategy priority: Above-the-fold images (LCP candidates) loading="lazy": Below-the-fold images (default) 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/nextjs-optimization