# Optimize Next.js Performance

Next.js applications can lose speed through large bundles, poor image handling, weak caching, and unnecessary client rendering. This skill guides Claude, Codex, and Claude Code through focused performance checks and practical App Router improvements.

## Install

```bash
npx skillstore add ai-vibe-prompts/atman36-nextjs-optimization
```

## Metadata

- - Slug: atman36-nextjs-optimization
- - Version: 1.0.0
- - Author: AI-Vibe-Prompts
- - GitHub username: Atman36
- - License: MIT
- - Repository: https://github.com/Atman36/AI-Vibe-Prompts/tree/main/.claude/skills/framework-specific/nextjs-optimization
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: low
- - Risk factors: scripts, external\_commands, network, env\_access
- - Quality score: 76
- - Public page: https://skillstore.pages.dev/skills/atman36-nextjs-optimization
- - Manifest: https://skillstore.pages.dev/api/skills/atman36-nextjs-optimization/manifest

## Capabilities

- Reviews Next.js version, routing style, and production readiness indicators.
- Identifies opportunities to use Server Components, Suspense, streaming, and dynamic imports.
- Guides image, font, metadata, and cache improvements for App Router projects.
- Suggests bundle analysis and Lighthouse checks for Core Web Vitals validation.
- Provides a structured optimization report with issues, applied fixes, estimated impact, and next steps.

## Use Cases

- Prepare a Product Launch: Audit a Next.js application before release and prioritize fixes that affect load time and Core Web Vitals.
- Reduce Frontend Bundle Size: Find large client components, unnecessary client boundaries, and imports that should be split or narrowed.
- Improve Production Readiness: Review image handling, font loading, caching, metadata, and next.config.js settings for a production site.

## Prompt Templates

### Run a Basic Next.js Performance Review

```
Review this Next.js project for common performance issues. Focus on images, fonts, routing style, metadata, and Core Web Vitals risks.
```

### Optimize App Router Rendering

```
Analyze my App Router pages and components. Recommend where to use Server Components, Suspense, streaming, caching, or dynamic rendering.
```

### Create a Bundle Reduction Plan

```
Find likely causes of a large client bundle in this Next.js project. Prioritize dynamic imports, import cleanup, and client component reductions.
```

### Build a Production Optimization Report

```
Produce a production optimization report for this Next.js 15 app. Include critical issues, recommended changes, expected performance impact, and validation steps.
```

## Limitations

- It is written for Next.js 15 and App Router patterns, so older projects may need adaptation.
- Performance impact estimates require verification with real Lighthouse or Web Vitals data.
- It does not replace manual review of business logic, accessibility, or production infrastructure.
- Some recommendations require project-specific testing before deployment.

## Best Practices

- Measure current performance before changing implementation details.
- Prefer Server Components unless a component needs browser APIs or interactive state.
- Validate each optimization with builds, Lighthouse, and real user metrics when available.

## Anti Patterns

- Adding use client at the top of large page trees without a clear interaction need.
- Using raw image tags or remote images without dimensions and format planning.
- Making many performance changes at once without measuring their effect.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T12:16:18.253\+00:00
- - Summary: Static analysis reported many command, network, environment, and dynamic import patterns, but review found them in Markdown guidance and Next.js examples. No prompt injection, credential exfiltration, malicious code execution, or unsafe secret handling was found in SKILL.md. The skill is low risk because it may guide an assistant to run normal project inspection and build tools.

## Stats

- - Views: 307
- - Downloads: 7
- - Favorites: 0
- - Popularity score: 0