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:

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:

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

Check for violations:

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:

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

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

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:

export const revalidate = 3600; // Revalidate every hour

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