Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Next.js 15 Optimization Skill · aiskillstore | DecimalAI

aiskillstore/nextjs-optimization

SkillScore82Maintained

Optimize Next.js 15 applications for performance, Core Web Vitals, and production best practices using App Router patterns

Frontendby aiskillstore

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI packnextjsperformanceoptimization

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/aiskillstore-nextjs-optimization/SKILL.md

decimalai skills pull aiskillstore-nextjs-optimization --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/aiskillstore-nextjs-optimization/SKILL.md https://app.decimal.ai/s/aiskillstore-nextjs-optimization/SKILL.md

Raw file: /s/aiskillstore-nextjs-optimization/SKILL.md ↗ · machine-readable summary at /s/aiskillstore-nextjs-optimization.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 20d ago

—+163% tokens0% turns82% of whole cases pass with skill (18/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-14	✗→✓	▲ Improved	210%	0%
case-04	✓→✓	＝ Same ✓	181%	0%
case-05	✓→✓	＝ Same ✓	223%	0%
case-06	✓→✓	＝ Same ✓	180%	0%
case-07	✓→✓	＝ Same ✓	231%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

aiskillstore / marketplace

skills/atman36/nextjs-optimization/SKILL.md

View on GitHub ↗

Imported 8/10/2026Version v1

Skill contents

SKILL.md

Next.js 15 Optimization Skill

Objective

Optimize Next.js applications to achieve:

Perfect Core Web Vitals scores (LCP < 2.5s, FID < 100ms, CLS < 0.1)
Fast page load times and optimal rendering strategies
Efficient data fetching and caching
Production-ready build configuration
SEO and accessibility excellence

When to Use This Skill

Auto-invoke when:

Project uses Next.js (detected by next in dependencies)
User mentions "optimize", "performance", "slow", or "Core Web Vitals"
Before production deployment
After adding new features or pages
User requests Next.js-specific improvements

Prerequisites Check

Tools: Read, Grep

Verify Next.js version:

bash # Read package.json # Check for "next": "^15.0.0" or higher

Detect App Router (Next.js 13+):

Check for app/ directory
Check for layout.tsx, page.tsx files

Detect Pages Router (Legacy):

Check for pages/ directory
Suggest migration to App Router

Optimization Categories

1. Rendering Strategy Optimization

Goal: Choose optimal rendering for each page/component

Tools: Read, Grep, Edit

1.1 Server Components (Default in App Router)

When to use:

Data fetching from APIs/databases
Heavy computation
Access to backend resources

Pattern:

typescript
// app/dashboard/page.tsx
export default async function DashboardPage() {
  const data = await fetchData(); // Runs on server
  return <Dashboard data={data} />;
}

Check for violations:

bash
# Search for "use client" in components that don't need it
grep -r "use client" app/ | grep -v "onClick\|useState\|useEffect"

1.2 Client Components

When to use:

Interactive UI (onClick, forms)
Browser APIs (window, localStorage)
React hooks (useState, useEffect)

Pattern:

typescript
// app/components/Counter.tsx
'use client';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Optimization: Keep client components small and leaf nodes

1.3 Static Generation (SSG)

When to use:

Content that rarely changes
Marketing pages, blogs, documentation

Pattern:

typescript
export const revalidate = 3600; // Revalidate every hour

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

1.4 Dynamic Rendering with ISR

When to use:

Content that changes periodically
E-commerce products, user profiles

Pattern:

typescript
export const revalidate = 60; // Revalidate every minute

export async function generateStaticParams() {
  const products = await getProducts();
  return products.map((p) => ({ slug: p.slug }));
}

2. Image Optimization

Goal: Optimize images for performance and Core Web Vitals

Tools: Grep, Read, Edit

2.1 Use Next.js Image Component

Find unoptimized images:

bash
grep -rn "<img " app/ src/

Replace with:

typescript
import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority // For above-the-fold images
  placeholder="blur" // Optional blur-up effect
/>

2.2 Configure Image Domains

Read next.config.js:

javascript
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
    ],
    formats: ['image/avif', 'image/webp'], // Modern formats
  },
};

2.3 Lazy Loading Strategy

priority: Above-the-fold images (LCP candidates)
loading="lazy": Below-the-fold images (default)

3. Font Optimization

Goal: Eliminate FOUT/FOIT and improve font loading

Tools: Read, Edit

3.1 Use next/font

Pattern:

typescript
// app/layout.tsx
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap', // Prevent FOIT
  variable: '--font-inter',
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

3.2 Self-Hosted Fonts

typescript
import localFont from 'next/font/local';

const customFont = localFont({
  src: './fonts/CustomFont.woff2',
  display: 'swap',
  variable: '--font-custom',
});

4. Data Fetching Optimization

Goal: Minimize waterfalls and optimize cache

Tools: Read, Grep, Edit

4.1 Parallel Data Fetching

Anti-pattern (Sequential):

typescript
const user = await getUser();
const posts = await getPosts(user.id); // Waits for user

Optimized (Parallel):

typescript
const [user, posts] = await Promise.all([
  getUser(),
  getPosts(),
]);

4.2 Streaming with Suspense

Pattern:

typescript
import { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <Header />
      <Suspense fallback={<Skeleton />}>
        <SlowComponent />
      </Suspense>
      <Footer />
    </>
  );
}

4.3 Cache Configuration

typescript
// Aggressive caching
fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }, // Cache for 1 hour
});

// No caching
fetch('https://api.example.com/data', {
  cache: 'no-store', // Always fresh
});

// Opt out of caching
export const dynamic = 'force-dynamic';

5. Bundle Optimization

Goal: Reduce JavaScript bundle size

Tools: Bash, Read, Edit

5.1 Analyze Bundle

bash
# Add to package.json scripts
npm run build
npx @next/bundle-analyzer

5.2 Dynamic Imports

Find large components:

bash
find app -name "*.tsx" -exec wc -l {} \; | sort -rn | head -10

Split with dynamic imports:

typescript
import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
  ssr: false, // Skip SSR if not needed
});

5.3 Tree Shaking

Check for barrel exports:

bash
grep -rn "export \* from" app/

Replace with specific imports:

typescript
// Anti-pattern
import { Button, Card, Modal } from '@/components';

// Optimized
import { Button } from '@/components/Button';

6. Metadata & SEO

Goal: Perfect SEO and social sharing

Tools: Read, Edit

6.1 Static Metadata

typescript
// app/layout.tsx
export const metadata = {
  title: {
    default: 'My App',
    template: '%s | My App',
  },
  description: 'Description for SEO',
  openGraph: {
    title: 'My App',
    description: 'Description for social sharing',
    images: ['/og-image.jpg'],
  },
  twitter: {
    card: 'summary_large_image',
  },
};

6.2 Dynamic Metadata

typescript
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      images: [post.ogImage],
    },
  };
}

7. Production Configuration

Goal: Optimize next.config.js for production

Tools: Read, Edit

7.1 Essential Config

javascript
// next.config.js
module.exports = {
  reactStrictMode: true,
  poweredByHeader: false, // Security
  compress: true, // Gzip compression
  
  // Compiler optimizations
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
  
  // Image optimization
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
  },
  
  // React Compiler (Next.js 15)
  experimental: {
    reactCompiler: true,
  },
};

7.2 Turbopack (Development)

json
// package.json
{
  "scripts": {
    "dev": "next dev --turbo"
  }
}

8. Core Web Vitals Optimization

Goal: Achieve perfect Lighthouse scores

Tools: Bash, Grep, Edit

8.1 LCP (Largest Contentful Paint) < 2.5s

Optimize:

Use priority on hero images
Preload critical resources
Server-side render above-the-fold content

typescript
// Preload critical resources
<link rel="preload" href="/hero.jpg" as="image" />

8.2 FID (First Input Delay) < 100ms

Optimize:

Minimize JavaScript execution
Use dynamic imports for non-critical code
Defer third-party scripts

typescript
import Script from 'next/script';

<Script
  src="https://analytics.example.com"
  strategy="lazyOnload" // Load after page interactive
/>

8.3 CLS (Cumulative Layout Shift) < 0.1

Optimize:

Always specify image dimensions
Reserve space for dynamic content
Use font-display: swap

css
/* Reserve space for ads/banners */
.ad-container {
  min-height: 250px;
}

9. Caching Strategy

Goal: Maximize cache hits and minimize server load

Tools: Read, Edit

9.1 Route Segment Config

typescript
// app/dashboard/page.tsx
export const revalidate = 3600; // ISR every hour
export const dynamic = 'auto'; // Automatic optimization
export const fetchCache = 'force-cache'; // Aggressive caching

9.2 Data Cache

typescript
// Deduplicated and cached automatically
const user = await fetch('https://api.example.com/user');

// Revalidate tag-based
export const revalidate = 60;
export const tags = ['user', 'profile'];

10. Monitoring & Measurement

Goal: Track performance over time

Tools: Bash, WebSearch

10.1 Add Web Vitals Reporting

typescript
// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

10.2 Lighthouse CI

bash
# Run Lighthouse
npx lighthouse http://localhost:3000 --view

# Check Core Web Vitals
npm run build
npm run start
npx lighthouse http://localhost:3000 --only-categories=performance

Optimization Checklist

Run through this checklist:

] All images use next/image with proper dimensions
] Fonts use next/font with display: swap
] Server Components used by default (no unnecessary 'use client')
] Client Components are leaf nodes and minimal
] Data fetching uses parallel requests where possible
] Slow components wrapped in <Suspense>
] Large components use dynamic imports
] Metadata configured for all pages
] next.config.js has production optimizations
] React Compiler enabled (Next.js 15)
] Bundle analyzed and optimized
] Core Web Vitals meet targets (test with Lighthouse)

Output Format

markdown
# Next.js Optimization Report

## Current Status
- **Next.js Version**: 15.0.3
- **Rendering**: App Router
- **React Version**: 19.0.0

## Issues Found

### 🔴 Critical (3)
1. **Unoptimized Images**: 12 `<img>` tags found
   - Files: `app/page.tsx`, `app/about/page.tsx`
   - Fix: Replace with `next/image`

2. **Large Client Bundle**: 342 KB (target: < 200 KB)
   - Cause: Heavy chart library loaded synchronously
   - Fix: Use dynamic import for `Chart` component

3. **Missing Font Optimization**: Using Google Fonts via <link>
   - Fix: Migrate to `next/font/google`

### 🟡 Warnings (2)
1. **Sequential Data Fetching**: Waterfall detected in `app/dashboard/page.tsx`
2. **No Metadata**: Missing OpenGraph tags on 5 pages

## Optimizations Applied

✅ Enabled React Compiler in next.config.js
✅ Added image optimization config
✅ Configured proper cache headers
✅ Added Suspense boundaries to slow routes

## Performance Impact (Estimated)

- **Load Time**: 3.2s → 1.8s (-44%)
- **Bundle Size**: 342 KB → 198 KB (-42%)
- **LCP**: 3.1s → 2.3s (✅ Good)
- **FID**: 85ms → 45ms (✅ Good)
- **CLS**: 0.15 → 0.05 (✅ Good)

## Next Steps

1. Replace 12 `<img>` tags with `next/image`
2. Split Chart component with dynamic import
3. Add metadata to 5 pages
4. Run Lighthouse to verify improvements

Best Practices

Server-First Mindset: Default to Server Components
Progressive Enhancement: Build for slow networks first
Measure, Don't Guess: Use Lighthouse and Web Vitals
Cache Aggressively: But revalidate appropriately
Optimize Incrementally: Fix critical issues first

Integration with Other Skills

codebase-analysis - Detect Next.js project and version
quality-gates - Run build and verify no regressions
react-patterns - Ensure React 19 best practices
testing-strategy - Add performance tests

Common Anti-Patterns to Avoid

❌ Using 'use client' at the top level ❌ Not specifying image dimensions ❌ Synchronous data fetching ❌ Loading entire component libraries ❌ No Suspense boundaries ❌ Ignoring Core Web Vitals

Version History

1.0.0 (2025-01-03): Initial skill for Next.js 15 with App Router focus

Illustrative Want to see what aiskillstore/nextjs-optimization would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

9/2/2026, 16:39 UTC · 22 cases

Measured on 19 comparable cases — below the 22 needed to publish a lift, so this result is shown here but not on the registry card or leaderboard.

Lift

+5%

82% vs 77%

Agent turns

0%

1.0 vs 1.0

Tokens

+163%

5,955.89 vs 2,261.32

fail → pass · 1pass → pass · 17fail → fail · 4

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 Our e-commerce store built on Next.js has been loading very slowly lately, especially on mobile devices. Can you audit our codebase and generate a comprehensive Next.js optimization report? I need to see our setup status, categorized critical and warning issues found across rendering, assets, and data fetching, any automatic fixes applied, estimated performance metrics improvements, and prioritized follow-up actions.	fail→fail	78,261	130,749	+67%	1	1	0%	5,626	4,248	-24%	0	0	—
case-02 We are preparing for a production launch of our Next.js web application next week. Please analyze the project performance and produce an optimization audit report. Make sure the output details our current framework version status, highlights critical bottlenecks versus minor warnings, details any config or code tweaks already applied, estimates metrics impacts (like bundle size and web vitals), and lists action items for the team.	fail→fail	58,608	58,501	-0%	1	1	0%	5,009	4,083	-18%	0	0	—
case-03 Users are reporting layout shifts and delayed responses in our Next.js dashboard. Please run a performance check on our application and provide a Next.js optimization report. The output should include our current project environment details, listed high-priority issues and secondary warnings, applied optimizations, estimated changes to load speed and core metrics, and recommendations on next steps.	fail→fail	63,706	25,320	-60%	1	1	0%	4,381	4,198	-4%	0	0	—
case-04 We are refactoring our user profile screen in an App Router codebase. We currently have `'use client'` at the top of `app/profile/page.tsx` because a small nested bookmark icon button handles `onClick` events. The team suggests keeping `'use client'` on the entire page component so all state lives together. How should this component tree be structured for optimal server rendering?	pass→pass	13,439	25,684	+91%	1	1	0%	2,379	6,691	+181%	0	0	—
case-05 We load hero banners from `https://images.cdn-provider.org` in our hero section using `<img src="https://images.cdn-provider.org/hero.jpg" width="1200" height="600" />`. Developers want to switch to native Next.js image handling. What changes are required in the component and framework config file?	pass→pass	13,511	14,567	+8%	1	1	0%	1,644	5,311	+223%	0	0	—
case-06 Our landing page suffers from Flash of Invisible Text (FOIT) when loading custom Google Fonts on slow 3G networks. The team tried adding `<link rel="stylesheet" href="https://fonts.googleapis.com/..." />` in `app/layout.tsx`. How should fonts be imported and configured to eliminate FOIT?	pass→pass	16,550	12,329	-26%	1	1	0%	2,114	5,924	+180%	0	0	—
case-07 In our product page `app/product/[id]/page.tsx`, we fetch user details with `await getUser()` and then fetch product reviews with `await getReviews()`. The user details fetch takes 300ms and reviews fetch takes 400ms, causing a 700ms delay. How should these fetch calls be restructured?	pass→pass	17,245	10,356	-40%	1	1	0%	1,767	5,840	+231%	0	0	—
case-08 We are tightening `next.config.js` for our production build. A developer proposed setting `reactStrictMode: false`, keeping console logs in production for debugging, and leaving header signatures on. What production optimization and security settings should be configured in `next.config.js`?	fail→fail	16,813	17,005	+1%	1	1	0%	2,677	5,942	+122%	0	0	—
case-09 Our main bundle size spiked after team members imported UI components using `import { Button, Modal, Card } from '@/components'` from a central `index.ts` barrel file. How should imports be updated to optimize bundle size and enable proper tree shaking?	pass→pass	13,784	18,710	+36%	1	1	0%	2,172	6,211	+186%	0	0	—
case-10 Our analytics dashboard loads a 250KB canvas chart library synchronously on initial page load, even though the chart sits below the fold and is only viewed by 20% of users. How should this component be imported to reduce initial bundle payload?	pass→pass	18,826	16,109	-14%	1	1	0%	2,577	5,461	+112%	0	0	—
case-11 Our page experiences a Cumulative Layout Shift (CLS) score of 0.25 whenever ad containers and dynamically loaded hero images render. What layout and CSS techniques should be implemented to bring CLS below 0.1?	pass→pass	39,188	23,812	-39%	1	1	0%	3,157	6,813	+116%	0	0	—
case-12 Our First Input Delay (FID) is 180ms because heavy third-party marketing analytics scripts block the main thread during initial page hydration. How should these scripts be loaded in Next.js to minimize main thread blocking?	pass→pass	16,709	17,488	+5%	1	1	0%	2,867	5,927	+107%	0	0	—
case-13 We have an e-commerce catalog page that fetches thousands of products. We want to generate static pages at build time but automatically refresh cached data every 60 seconds on demand. Which route segment export or cache options should be set?	pass→pass	18,133	14,429	-20%	1	1	0%	1,880	5,299	+182%	0	0	—
case-14 Our product page layout has a fast static header, a slow product recommendations section that queries a database (taking 1.5s), and a fast footer. Currently, the entire page blocks until recommendations finish loading. How should the layout be modified?	fail→pass	19,077	18,078	-5%	1	1	0%	1,933	5,985	+210%	0	0	—
case-15 We need to set up static OpenGraph metadata and dynamic page titles for our blog application using App Router conventions. How should static title templates and dynamic post metadata be declared?	pass→pass	17,952	23,015	+28%	1	1	0%	2,816	7,030	+150%	0	0	—
case-16 We need to fetch user profile data in a server component using the global `fetch` API, cache it by default, and allow manual cache invalidation using revalidation tags. What parameters should be passed to `fetch`?	pass→pass	22,431	8,013	-64%	1	1	0%	1,698	5,193	+206%	0	0	—
case-17 We are configuring Tailwind CSS v4 in our Next.js project. We want to define a custom color palette with 'brand-blue': '#1e40af' and set the default font family to Inter in `app/globals.css`. Can you write the CSS configuration?	pass→pass	31,384	7,535	-76%	1	1	0%	1,539	5,196	+238%	0	0	—
case-18 We need to implement email and password credentials authentication in our Next.js application using Auth.js (NextAuth v5). How do we configure the auth route handler in `app/api/auth/[...nextauth]/route.ts` with password hashing verification?	pass→pass	22,709	15,492	-32%	1	1	0%	3,291	7,310	+122%	0	0	—
case-19 We are deploying a standalone Node.js Express API alongside our frontend. Can you write a multi-stage Dockerfile for Node.js 20 Alpine that installs dependencies, builds, and runs `npm start` on port 4000?	pass→pass	13,277	16,242	+22%	1	1	0%	2,942	6,612	+125%	0	0	—
case-20 We are building a user registration form in React. We need to validate email format and password length (minimum 8 characters) using React Hook Form and Zod schema. How do we wire `useForm` with `@hookform/resolvers/zod`?	pass→pass	12,243	11,144	-9%	1	1	0%	1,995	6,149	+208%	0	0	—
case-21 We want to serve modern image formats like AVIF and WebP automatically to supporting browsers across our Next.js application. Where and how should image formats be configured?	pass→pass	15,309	7,401	-52%	1	1	0%	1,666	5,034	+202%	0	0	—
case-22 We want to continuously track Real User Monitoring (RUM) Core Web Vitals metrics across our production App Router deployment without adding heavy analytics bundles. What component or package should be added to `app/layout.tsx`?	pass→pass	9,061	11,751	+30%	1	1	0%	1,851	5,234	+183%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted, and 19 counted toward the lift figure. The other 3 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +5 percentage points is the difference between those two pass rates over the 19 comparable cases. 3 cases got worse with the skill loaded, and they are included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 77.3%
Pass rate with the skill: 81.8%
Cases attempted: 22
Cases counted toward lift: 19
Cases that regressed: 3
Skill version measured: v1
Run completed: 9/2/2026, 16:39 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-14

Prompt

Our product page layout has a fast static header, a slow product recommendations section that queries a database (taking 1.5s), and a fast footer. Currently, the entire page blocks until recommendations finish loading. How should the layout be modified?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run82

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+164% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 20 days ago

Other measured skills in the registry, with their headline benchmark lift.