skills.rest
cr8297408
cr8297408COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/cr8297408/personal-agents-manager-tools --skill nextjs-optimization-cr8297408
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
Gekkos-techGekkos-tech
4

performance

Audit website performance with Lighthouse and provide targeted optimizations.

Official
Advanced
tech-leads-clubtech-leads-club
5.0k

web-quality-audit

Analyze websites for performance, accessibility, and SEO issues.

Official
Basic
travisjneumantravisjneuman
88

performance-engineering

Implement Core Web Vitals monitoring, bundle analysis, and load testing for web applications.

Community
Advanced
MarcoAntoliniMarcoAntolini
1

web-react-performance

Optimize React and Next.js performance using core web vitals and bundle size techniques.

Community
Advanced