skills.rest
jovermier
jovermierCOMMUNITY
Explore all skills by this author →
Website𝕏@jrovermierGitHub

nextjs-performance

Optimize Next.js apps for Core Web Vitals using next/image, next/font, and next/dynamic.

2|Updated Jan 3, 2026
Search Tags:#caching#Next.js#optimize#core web vitals#image optimization#font loading#dynamic imports
One-click install
npx skills add https://github.com/jovermier/cc-stack-marketplace --skill nextjs-performance-jovermier
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-performance
Source: https://github.com/jovermier/cc-stack-marketplace/tree/main/plugins/cc-nextjs/skills/nextjs-performance
Command: npx skills add https://github.com/jovermier/cc-stack-marketplace --skill nextjs-performance-jovermier

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers optimize Next.js apps for speed and Core Web Vitals by providing targeted guidance on image handling, font loading, code-splitting, and caching strategies.

Core Features & Use Cases

  • Image optimization with next/image and proper sizing to prevent CLS and improve LCP.
  • Font loading with next/font to eliminate external font requests and avoid layout shifts.
  • Dynamic imports and code-splitting with next/dynamic to reduce initial bundle size.
  • Caching and ISR strategies for data freshness and server performance.
  • Cross-cutting best practices for client navigation using the Link component and prefetching.

Quick Start

Audit a Next.js project for image usage, font loading, and dynamic imports, then apply recommended changes to achieve Core Web Vitals targets.

Frequently Asked Questions about nextjs-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize Next.js images to improve Core Web Vitals?▼

Optimize Next.js images using next/image with proper sizing attributes to prevent layout shifts and improve Core Web Vitals LCP scores. This skill guides configuring image dimensions to boost page speed.

What's the best way to handle font loading in Next.js without layout shifts?▼

Handle font loading in Next.js using next/font to automatically inline fonts and eliminate external network requests. This approach avoids layout shifts by self-hosting fonts within your Next.js project.

How do I use dynamic imports in Next.js to reduce initial bundle size?▼

Use dynamic imports in Next.js with next/dynamic to code-split your components and reduce initial bundle size. This skill helps identify which components to dynamically load for faster page loads.

How do I configure Next.js caching strategies for data freshness using ISR?▼

Configure Next.js caching using ISR and revalidate strategies to balance server performance with data freshness. This skill covers implementing incremental static regeneration for your project's data.

Does Next.js prefetching with the Link component improve client navigation speed?▼

Next.js prefetching with the Link component improves client navigation speed by loading linked routes in the background. This skill addresses cross-cutting best practices for optimizing Next.js client-side routing.

Related Skills

Explore More Software Engineering Skills→
cr8297408cr8297408

nextjs-optimization

Audit Next.js App Router projects for Core Web Vitals, SEO, and performance.

Community
Advanced
SoborboSoborbo
4

speed-monitoring

Monitor production website performance with Core Web Vitals budgets and alerts.

Community
Advanced
adelproadelpro
34

nextjs-best-practices

Apply best-practice patterns to Next.js App Router projects.

Community
Advanced
4lerman4lerman

senior-frontend

Generate React and Next.js projects and components with Python scripts.

Community
Advanced