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

Verify Next.js version:

Read package.json

Check for "next": "^15.0.0" or higher

Detect App Router (Next.js 13+):

Check for app/ directory
Check for layout.tsx , page.tsx files

Detect Pages Router (Legacy):

Check for pages/ directory
Suggest migration to App Router

Optimization Categories

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:

// app/dashboard/page.tsx export default async function DashboardPage() { const data = await fetchData(); // Runs on server return <Dashboard data={data} />; }

Check for violations:

Search for "use client" in components that don't need it

grep -r "use client" app/ | grep -v "onClick|useState|useEffect"

1.2 Client Components

When to use:

Interactive UI (onClick, forms)
Browser APIs (window, localStorage)
React hooks (useState, useEffect)

Pattern:

// app/components/Counter.tsx 'use client';

export default function Counter() { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; }

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:

export const revalidate = 3600; // Revalidate every hour

export default async function BlogPost({ params }) { const post = await getPost(params.slug); return <Article post={post} />; }

1.4 Dynamic Rendering with ISR

When to use:

Content that changes periodically
E-commerce products, user profiles

Pattern:

export const revalidate = 60; // Revalidate every minute

export async function generateStaticParams() { const products = await getProducts(); return products.map((p) => ({ slug: p.slug })); }

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:

grep -rn "<img " app/ src/

Replace with:

import Image from 'next/image';

2.2 Configure Image Domains

Add to package.json scripts

npm run build npx @next/bundle-analyzer

5.2 Dynamic Imports

Find large components:

find app -name "*.tsx" -exec wc -l {} ; | sort -rn | head -10

Split with dynamic imports:

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'), { loading: () => <Skeleton />, ssr: false, // Skip SSR if not needed });

5.3 Tree Shaking

Check for barrel exports:

grep -rn "export * from" app/

Replace with specific imports:

// Anti-pattern import { Button, Card, Modal } from '@/components';

// Optimized import { Button } from '@/components/Button';

Metadata & SEO

Goal: Perfect SEO and social sharing

Tools: Read, Edit

6.1 Static Metadata

// app/layout.tsx export const metadata = { title: { default: 'My App', template: '%s | My App', }, description: 'Description for SEO', openGraph: { title: 'My App', description: 'Description for social sharing', images: ['/og-image.jpg'], }, twitter: { card: 'summary_large_image', }, };

6.2 Dynamic Metadata

export async function generateMetadata({ params }) { const post = await getPost(params.slug); return { title: post.title, description: post.excerpt, openGraph: { images: [post.ogImage], }, }; }

Production Configuration

Goal: Optimize next.config.js for production

Tools: Read, Edit

7.1 Essential Config

// next.config.js module.exports = { reactStrictMode: true, poweredByHeader: false, // Security compress: true, // Gzip compression

// Compiler optimizations compiler: { removeConsole: process.env.NODE_ENV === 'production', },

// Image optimization images: { formats: ['image/avif', 'image/webp'], deviceSizes: [640, 750, 828, 1080, 1200, 1920], },

// React Compiler (Next.js 15) experimental: { reactCompiler: true, }, };

7.2 Turbopack (Development)

// package.json { "scripts": { "dev": "next dev --turbo" } }

Core Web Vitals Optimization

Goal: Achieve perfect Lighthouse scores

Tools: Bash, Grep, Edit

8.1 LCP (Largest Contentful Paint) < 2.5s

Optimize:

Use priority on hero images
Preload critical resources
Server-side render above-the-fold content

// Preload critical resources <link rel="preload" href="/hero.jpg" as="image" />

8.2 FID (First Input Delay) < 100ms

Optimize:

Minimize JavaScript execution
Use dynamic imports for non-critical code
Defer third-party scripts

import Script from 'next/script';

8.3 CLS (Cumulative Layout Shift) < 0.1

Optimize:

Always specify image dimensions
Reserve space for dynamic content
Use font-display: swap

/* Reserve space for ads/banners */ .ad-container { min-height: 250px; }

Caching Strategy

Goal: Maximize cache hits and minimize server load

Tools: Read, Edit

9.1 Route Segment Config

// app/dashboard/page.tsx export const revalidate = 3600; // ISR every hour export const dynamic = 'auto'; // Automatic optimization export const fetchCache = 'force-cache'; // Aggressive caching

9.2 Data Cache

// Deduplicated and cached automatically const user = await fetch('https://api.example.com/user');

// Revalidate tag-based export const revalidate = 60; export const tags = ['user', 'profile'];

Monitoring & Measurement

Goal: Track performance over time

Tools: Bash, WebSearch

10.1 Add Web Vitals Reporting

// app/layout.tsx import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) { return ( <html> <body> {children} <SpeedInsights /> </body> </html> ); }

10.2 Lighthouse CI

Run Lighthouse

npx lighthouse http://localhost:3000 --view

Check Core Web Vitals

npm run build npm run start npx lighthouse http://localhost:3000 --only-categories=performance

Optimization Checklist

Run through this checklist:

All images use next/image with proper dimensions
Fonts use next/font with display: swap
Server Components used by default (no unnecessary 'use client')
Client Components are leaf nodes and minimal
Data fetching uses parallel requests where possible
Slow components wrapped in <Suspense>
Large components use dynamic imports
Metadata configured for all pages
next.config.js has production optimizations
React Compiler enabled (Next.js 15)
Bundle analyzed and optimized
Core Web Vitals meet targets (test with Lighthouse)

Output Format

Next.js Optimization Report

Current Status

Next.js Version: 15.0.3
Rendering: App Router
React Version: 19.0.0

Issues Found

🔴 Critical (3)

Unoptimized Images: 12 <img> tags found
- Files: app/page.tsx, app/about/page.tsx
- Fix: Replace with next/image
Large Client Bundle: 342 KB (target: < 200 KB)
- Cause: Heavy chart library loaded synchronously
- Fix: Use dynamic import for Chart component
Missing Font Optimization: Using Google Fonts via <link>
- Fix: Migrate to next/font/google

🟡 Warnings (2)

Sequential Data Fetching: Waterfall detected in app/dashboard/page.tsx
No Metadata: Missing OpenGraph tags on 5 pages

Optimizations Applied

✅ Enabled React Compiler in next.config.js ✅ Added image optimization config ✅ Configured proper cache headers ✅ Added Suspense boundaries to slow routes

Performance Impact (Estimated)

Load Time: 3.2s → 1.8s (-44%)
Bundle Size: 342 KB → 198 KB (-42%)
LCP: 3.1s → 2.3s (✅ Good)
FID: 85ms → 45ms (✅ Good)
CLS: 0.15 → 0.05 (✅ Good)

Next Steps

Replace 12 <img> tags with next/image
Split Chart component with dynamic import
Add metadata to 5 pages
Run Lighthouse to verify improvements

Best Practices

Server-First Mindset: Default to Server Components
Progressive Enhancement: Build for slow networks first
Measure, Don't Guess: Use Lighthouse and Web Vitals
Cache Aggressively: But revalidate appropriately
Optimize Incrementally: Fix critical issues first

Integration with Other Skills

codebase-analysis
Detect Next.js project and version
quality-gates
Run build and verify no regressions
react-patterns
Ensure React 19 best practices
testing-strategy
Add performance tests

Common Anti-Patterns to Avoid

❌ Using 'use client' at the top level ❌ Not specifying image dimensions ❌ Synchronous data fetching ❌ Loading entire component libraries ❌ No Suspense boundaries ❌ Ignoring Core Web Vitals

Version History

1.0.0 (2025-01-03): Initial skill for Next.js 15 with App Router focus

nextjs-optimization

Safety Notice

Copy this and send it to your AI assistant to learn

Read package.json

Check for "next": "^15.0.0" or higher

Search for "use client" in components that don't need it

Add to package.json scripts

Run Lighthouse

Check Core Web Vitals

Next.js Optimization Report

Current Status

Issues Found

🔴 Critical (3)

🟡 Warnings (2)

Optimizations Applied

Performance Impact (Estimated)

Next Steps

Source Transparency

Related Skills

testing-strategy

quality-gates

frontend-design