nextjs-optimization

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

Updated Jan 18, 2026

Search Tags:#performance #optimization #metadata #nextjs #seo #bundle-size

Ready to run

npx skills add https://github.com/cr8297408/personal-agents-manager-tools --skill nextjs-optimization-cr8297408

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-optimization
Source: https://github.com/cr8297408/personal-agents-manager-tools/tree/main/nextjs-optimization
Command: npx skills add https://github.com/cr8297408/personal-agents-manager-tools --skill nextjs-optimization-cr8297408

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js applications often struggle with Core Web Vitals, SEO visibility, and bloated bundles due to inconsistent metadata, unoptimized images/fonts, and large client-side JavaScript footprints.

Core Features & Use Cases

Metadata optimization: ensure SEO-friendly titles, descriptions, and Open Graph via the Metadata API.
Asset optimization: replace <img> with next/image and adopt next/font for fonts to reduce CLS.
Bundle reduction: identify large client components, implement lazy loading, and optimize dynamic imports across routes.
Use Case: A production Next.js site with poor Lighthouse scores gets a workflow to improve metadata, imagery, fonts, and code-splitting, resulting in faster TTFB and FCP.

Quick Start

Use the nextjs-optimization skill to audit a Next.js app in production mode and apply metadata, image/font optimizations, and bundle improvements.

Frequently Asked Questions about nextjs-optimization

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

FAQPage Schema

How do I optimize Core Web Vitals for a Next.js App Router project?▼

To optimize Core Web Vitals in a Next.js App Router project, enforce the Metadata API for SEO, replace standard img tags with next/image, adopt next/font, and use dynamic imports to minimize bundle size and reduce CLS.

What is the best way to reduce bundle size in Next.js applications?▼

The best way to reduce Next.js bundle size is identifying large client components and implementing lazy loading with dynamic import strategies across routes, minimizing the client-side JavaScript footprint for faster page loads.

How do I fix Next.js metadata for SEO and Open Graph?▼

Fix Next.js metadata for SEO by enforcing the Metadata API to ensure SEO-friendly titles, descriptions, and Open Graph tags are properly configured, improving search visibility and social sharing.

Does next/image automatically reduce Cumulative Layout Shift?▼

Yes, replacing standard img tags with next/image automatically reduces Cumulative Layout Shift (CLS) by handling image dimensions and lazy loading natively, preventing layout shifts during page rendering.

Can I audit a production Next.js site for Lighthouse performance issues?▼

Yes, you can audit a production Next.js site to identify poor Lighthouse scores by analyzing metadata usage, image and font optimization gaps, and large bundle sizes to create a workflow for faster TTFB and FCP.