nextjs-optimization

Optimize Next.js applications for performance and SEO with image, font, and bundle improvements.

4|Updated Feb 16, 2017

Search Tags:#image #cache #nextjs #seo #font

Ready to run

npx skills add https://github.com/nekorush14/dotfiles --skill nextjs-optimization

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-optimization
Source: https://github.com/nekorush14/dotfiles/tree/main/configs/claude/skills/nextjs-optimization
Command: npx skills add https://github.com/nekorush14/dotfiles --skill nextjs-optimization

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill focuses on optimizing Next.js apps for performance, Core Web Vitals, and SEO through image/font optimization, caching, and code splitting.

Core Features & Use Cases

Image & Font Optimization: Use next/image and next/font for performance.
Code Splitting & Tree Shaking: Reduce bundle size with dynamic imports.
Caching & Revalidation: Implement ISR and cache strategies for speed.
SEO & Metadata: Generate metadata and sitemaps for discoverability.

Quick Start

Audit a Next.js project, implement image optimizations, split bundles, and add caching and metadata.

Frequently Asked Questions about nextjs-optimization

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

FAQPage Schema

How do I optimize images in Next.js for better performance?▼

Image optimization in Next.js uses the next/image component to automatically serve responsive, lazy-loaded images with modern formats. It reduces file size, prevents layout shift, and improves Core Web Vitals scores by handling image delivery based on device size and network conditions.

What's the best way to improve Core Web Vitals in a Next.js application?▼

Core Web Vitals improve through image and font optimization via next/image and next/font, code splitting with dynamic imports, strategic caching with ISR, and lazy-loading strategies. These reduce bundle size, eliminate render-blocking resources, and stabilize layout, directly addressing LCP, FID, and CLS metrics.

How do I reduce Next.js bundle size and improve load times?▼

Bundle reduction combines code splitting through dynamic imports, tree-shaking unused code, and lazy-loading non-critical components. Next.js automatically splits at route boundaries; dynamic imports defer component loading until needed, cutting initial payload and accelerating first contentful paint.

Can I use caching and revalidation in Next.js to speed up content delivery?▼

Yes. Incremental Static Regeneration (ISR) and cache strategies allow Next.js to serve pre-rendered pages with automatic revalidation on demand or on schedule. This combines static performance with fresh content, reducing server load and response time for frequently accessed routes.

How do I add SEO metadata and sitemaps to a Next.js site?▼

Next.js metadata APIs enable per-page title, description, Open Graph tags, and structured data injection into the document head. Sitemaps generated programmatically list all routes for search engines, improving crawlability and discoverability while supporting canonical URLs and robots directives.

Do I need to manually audit performance, or can Next.js optimize automatically?▼

Next.js provides built-in optimizations for images, fonts, and code splitting, but measurement-first diagnostics—using tools to identify bottlenecks—and explicit performance budgets ensure targets are met. Manual audits catch custom code inefficiencies and validate that Core Web Vitals thresholds are reached.