Does it support the Next.js App Router and fetch caching?

Absolutely. It includes guidance on using fetch options like revalidate and tags, as well as managing caching strategies compatible with the modern Next.js architecture.

Why is next/font preferred over external Google Fonts?

This skill helps you implement next/font to self-host fonts automatically, which removes external requests, improves privacy, and ensures there is no layout shift during font loading.

How does this skill help with Cumulative Layout Shift (CLS)?

The skill provides specific implementation patterns for next/image and next/font that ensure dimensions are reserved and assets are optimized, preventing elements from jumping during page load.

Can it help reduce the initial JavaScript payload?

Yes, it guides you through using next/dynamic for code splitting, ensuring that heavy components are only loaded when they are actually needed by the user.

Next.js Performance

Name: Next.js Performance
Author: jovermier

byjovermier

開発者ツール

Optimizes Next.js applications for speed and Core Web Vitals using expert implementation patterns for images, fonts, and caching.

概要

Next.js Performance is a specialized Claude Code skill designed to audit and improve the speed of React-based web applications. It provides expert guidance for implementing core framework features like automatic image optimization, self-hosted fonts, and code splitting via dynamic imports. By focusing on critical metrics such as Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP), the skill helps developers implement sophisticated caching strategies and bundle optimizations that result in faster load times, reduced server strain, and superior user experiences.

主な機能

0 GitHub stars
Font loading strategies using next/font to eliminate layout shifts
Bundle size reduction through tree shaking and dependency management
Advanced caching and Incremental Static Regeneration (ISR) configuration
Automatic image optimization and CLS prevention patterns
Dynamic import implementation for efficient code splitting

ユースケース

Improving Core Web Vitals scores for better search engine rankings
Optimizing data fetching and server-side rendering for high-traffic sites
Reducing initial JavaScript bundle sizes for mobile performance

概要

主な機能

0 GitHub stars
Font loading strategies using next/font to eliminate layout shifts
Bundle size reduction through tree shaking and dependency management
Advanced caching and Incremental Static Regeneration (ISR) configuration
Automatic image optimization and CLS prevention patterns
Dynamic import implementation for efficient code splitting

ユースケース

Improving Core Web Vitals scores for better search engine rankings
Optimizing data fetching and server-side rendering for high-traffic sites
Reducing initial JavaScript bundle sizes for mobile performance