| name | nextjs-optimization |
| description | Optimize images, fonts, scripts, and metadata for Next.js performance and Core Web Vitals. Use when configuring next/image for LCP, next/font for zero layout shift, next/script loading strategies, or generateMetadata for SEO. |
| metadata | {"triggers":{"files":["**/layout.tsx","**/page.tsx"],"keywords":["metadata","generateMetadata","next/image","next/font"]}} |
Optimization
Priority: P1 (HIGH)
Core optimization primitives provided by Next.js. Monitor First, Optimize Later.
Monitoring (Core Web Vitals)
- LCP (Largest Contentful Paint): Target < 2.5s.
- CLS (Cumulative Layout Shift): Target < 0.1.
- INP (Interaction to Next Paint): Target < 200ms.
- Tools: Chrome DevTools "Performance" tab,
next/speed-insights, React Profiler.
Images
Always use next/image to prevent CLS and enable automatic optimization:
See implementation examples
Fonts
Use next/font for zero layout shift — self-hosts fonts and adds font-display: swap:
See implementation examples
Metadata (SEO)
See implementation examples
Scripts
Use next/script with appropriate loading strategies:
beforeInteractive: Critical scripts (polyfills).afterInteractive: Analytics (Google Analytics).lazyOnload: Chat widgets, social embeds.
Bundle & Components
- Analyze with
@next/bundle-analyzer. Prune heavy libraries; use ESM-tree-shakable dependencies.
- Use
dynamic imports with Suspense for large components not needed at initial render.
- Enable
ppr: true (Partial Prerendering) in Next.js 15+ for static shell + dynamic islands.
Anti-Patterns
- No
<img> tag: Use next/image to prevent CLS and enable automatic optimization.
- No Google Fonts CDN link: Use
next/font to self-host and eliminate layout shift.
- No metadata in
_document.tsx: Use export const metadata or generateMetadata().
- No 3rd-party scripts in
<head>: Use next/script with appropriate strategy.
