skills.rest
jerelvelarde
jerelvelardeCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-performance

Audit Next.js app performance across SSR/SSG/ISR, images, fonts, and bundles.

6|Updated Feb 19, 2026
Search Tags:#performance#caching#optimization#nextjs#ssr#ssg#isr
One-click install
npx skills add https://github.com/jerelvelarde/chalk-skills --skill nextjs-performance-jerelvelarde
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-performance
Source: https://github.com/jerelvelarde/chalk-skills/tree/main/skills/nextjs-performance
Command: npx skills add https://github.com/jerelvelarde/chalk-skills --skill nextjs-performance-jerelvelarde

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit and optimize Next.js applications for performance across SSR/SSG/ISR, image and font optimization, route caching, and bundle analysis.

Core Features & Use Cases

  • Decision-tree guidance for rendering strategies (SSR/SSG/ISR) per route.
  • Caching and asset optimization checks for images, fonts, and bundles.
  • Practical, deploy-target aware recommendations for Vercel or self-hosted environments.

Quick Start

Run a targeted audit on your Next.js project to start optimizing rendering and resource strategies.

Frequently Asked Questions about nextjs-performance

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

FAQPage Schema
How do I audit and optimize Next.js performance bottlenecks?▼

To audit and optimize Next.js performance, you analyze bottlenecks across SSR, SSG, and ISR rendering strategies, then adjust per-route caching and resource handling for actionable improvements.

When should I use SSR, SSG, or ISR for my Next.js routes?▼

You should choose between SSR, SSG, and ISR based on route-specific data needs. This process uses decision-tree guidance to evaluate each route and apply the appropriate rendering strategy for optimal performance.

Does this Next.js optimization approach work for self-hosted and Vercel deployments?▼

Yes, this Next.js optimization approach provides deploy-target aware recommendations. It delivers specific caching configurations and rendering adjustments tailored for both Vercel and self-hosted deployment environments.

How do I reduce bundle size and optimize images in Next.js?▼

To reduce bundle size and optimize images in Next.js, you apply targeted caching and asset optimization checks. This audits resource loading for images and fonts to minimize overall bundle payload.

Can I optimize Next.js app routes under both app/ and pages/ directories?▼

Yes, you can optimize Next.js app routes under both the app/ and pages/ directories. The audit applies rendering decisions and caching configurations uniformly across either directory structure.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

nextjs-routes-and-layouts

Plan, implement, and refactor Next.js App Router routes and layouts.

Official
Intermediate
WalshingtonWalshington

tanstack-start

Build and deploy TanStack Start full-stack React apps on Cloudflare Workers.

Community
Advanced
d-padmanabhand-padmanabhan
15

frontend-engineering

Guide frontend architecture decisions across rendering models, performance budgets, and CI gates.

Community
Advanced
botPhUbotPhU

nextjs-expert

Diagnose and fix Next.js App Router routing, hydration, and performance issues.

Community
Advanced