Optimizes Next.js apps for Core Web Vitals (LCP, INP, CLS) via image/font optimization, caching with unstable_cache/revalidateTag, Server Components, Suspense streaming, and bundle reduction. Supports Next.js 16 + React 19.
From developer-kit-typescriptnpx claudepluginhub giuseppe-trisciuoglio/developer-kit --plugin developer-kit-typescriptThis skill is limited to using the following tools:
references/api-routes.mdreferences/bundle-optimization.mdreferences/caching-strategies.mdreferences/core-web-vitals.mdreferences/font-optimization.mdreferences/image-optimization.mdreferences/metadata-seo.mdreferences/nextjs-16-patterns.mdreferences/server-components.mdreferences/streaming-suspense.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
Expert guidance for optimizing Next.js applications with focus on Core Web Vitals, modern patterns, and best practices.
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.
Use this skill when working on Next.js applications and need to:
next/image for faster loadingnext/font to eliminate layout shiftunstable_cache, revalidateTag, or ISRnext/imagenext/fontunstable_cache, revalidateTag, ISR)Load relevant reference files based on the area you're optimizing:
references/image-optimization.mdreferences/font-optimization.mdreferences/caching-strategies.mdreferences/server-components.mdFollow the quick patterns for common optimizations
Apply before/after conversions to improve existing code
Verify improvements with Lighthouse after changes
BEFORE (Client Component with useEffect):
'use client'
import { useEffect, useState } from 'react'
export default function ProductList() {
const [products, setProducts] = useState([])
useEffect(() => {
fetch('/api/products').then(r => r.json()).then(setProducts)
}, [])
return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>
}
AFTER (Server Component with direct data access):
import { db } from '@/lib/db'
export default async function ProductList() {
const products = await db.product.findMany()
return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>
}
import Image from 'next/image'
export function Hero() {
return (
<div className="relative w-full h-[600px]">
<Image
src="/hero.jpg"
alt="Hero"
fill
priority // Disable lazy loading for LCP
sizes="100vw"
className="object-cover"
/>
</div>
)
}
import { unstable_cache, revalidateTag } from 'next/cache'
// Cached data function
const getProducts = unstable_cache(
async () => db.product.findMany(),
['products'],
{ revalidate: 3600, tags: ['products'] }
)
// Revalidate on mutation
export async function createProduct(data: FormData) {
'use server'
await db.product.create({ data })
revalidateTag('products')
}
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={inter.variable}>
<body className={`${inter.className} antialiased`}>
{children}
</body>
</html>
)
}
import { Suspense } from 'react'
export default function Page() {
return (
<>
<header>Static content (immediate)</header>
<Suspense fallback={<ProductSkeleton />}>
<ProductList /> {/* Streamed when ready */}
</Suspense>
<Suspense fallback={<ReviewsSkeleton />}>
<Reviews /> {/* Independent streaming */}
</Suspense>
</>
)
}
Load these references when working on specific areas:
| Topic | Reference File |
|---|---|
| Core Web Vitals | references/core-web-vitals.md |
| Image Optimization | references/image-optimization.md |
| Font Optimization | references/font-optimization.md |
| Caching Strategies | references/caching-strategies.md |
| Server Components | references/server-components.md |
| Streaming/Suspense | references/streaming-suspense.md |
| Bundle Optimization | references/bundle-optimization.md |
| Metadata/SEO | references/metadata-seo.md |
| API Routes | references/api-routes.md |
| Next.js 16 Patterns | references/nextjs-16-patterns.md |
| From | To | Benefit |
|---|---|---|
useEffect + fetch | Direct async in Server Component | -70% JS, faster TTFB |
useState for data | Server Component with direct DB access | Simpler code, no hydration |
| Client-side fetch | unstable_cache or ISR | Faster repeated loads |
img tag | next/image | Optimized formats, lazy loading |
| CSS font import | next/font | Zero CLS, automatic optimization |
| Static import of heavy component | dynamic() | Reduced initial bundle |
next/image for all imagespriority to LCP images onlywidth and height or fill with sizesplaceholder="blur" for better UXnext/font instead of CSS importssubsets to reduce sizedisplay: 'swap' for immediate text rendervariable optionunstable_cachedynamic()@next/bundle-analyzerpriority should only be used for above-the-fold imageswidth and height are required unless using fill// Next.js 15+ params is a Promise
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
const post = await fetchPost(slug)
return <article>{post.content}</article>
}
'use client'
import { use, Suspense } from 'react'
function Comments({ promise }: { promise: Promise<Comment[]> }) {
const comments = use(promise) // Suspend until resolved
return <ul>{comments.map(c => <li key={c.id}>{c.text}</li>)}</ul>
}
'use client'
import { useOptimistic } from 'react'
export function TodoList({ todos }: { todos: Todo[] }) {
const [optimisticTodos, addOptimisticTodo] = useOptimistic(
todos,
(state, newTodo: Todo) => [...state, newTodo]
)
async function addTodo(formData: FormData) {
const text = formData.get('text') as string
addOptimisticTodo({ id: crypto.randomUUID(), text, completed: false })
await createTodo(text)
}
return (
<form action={addTodo}>
<input name="text" />
{optimisticTodos.map(todo => <div key={todo.id}>{todo.text}</div>)}
</form>
)
}
# Install analyzer
npm install --save-dev @next/bundle-analyzer
# Run analysis
ANALYZE=true npm run build
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer({
modularizeImports: {
'lodash': { transform: 'lodash/{{member}}' },
},
})
next/image with proper dimensionspriority attributenext/font with subsets// ❌ DON'T: Fetch in useEffect
'use client'
useEffect(() => { fetch('/api/data').then(...) }, [])
// ✅ DO: Fetch directly in Server Component
const data = await fetch('/api/data')
// ❌ DON'T: Forget dimensions on images
<Image src="/photo.jpg" />
// ✅ DO: Always provide dimensions
<Image src="/photo.jpg" width={800} height={600} />
// ❌ DON'T: Use priority on all images
<Image src="/photo1.jpg" priority />
<Image src="/photo2.jpg" priority />
// ✅ DO: Priority only for LCP
<Image src="/hero.jpg" priority />
<Image src="/photo.jpg" loading="lazy" />
// ❌ DON'T: Cache everything with same TTL
{ revalidate: 3600 }
// ✅ DO: Match TTL to data change frequency
{ revalidate: 86400 } // Categories rarely change
{ revalidate: 60 } // Comments change often