🛠️ 開発・MCP コミュニティ

nextjs-optimization

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

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o nextjs-optimization.zip https://jpskill.com/download/17334.zip && unzip -o nextjs-optimization.zip && rm nextjs-optimization.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17334.zip -OutFile "$d\nextjs-optimization.zip"; Expand-Archive "$d\nextjs-optimization.zip" -DestinationPath $d -Force; ri "$d\nextjs-optimization.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して nextjs-optimization.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → nextjs-optimization フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Next.js 15 最適化スキル

目的

Next.js アプリケーションを最適化し、以下を達成します。

完璧な Core Web Vitals スコア (LCP < 2.5 秒、FID < 100 ミリ秒、CLS < 0.1)
高速なページロード時間と最適なレンダリング戦略
効率的なデータフェッチとキャッシュ
本番環境対応のビルド構成
SEO とアクセシビリティの卓越性

このスキルを使用するタイミング

以下の場合に自動的に起動します。

プロジェクトで Next.js を使用している場合 (package.json の依存関係に next があることで検出)
ユーザーが "optimize"、"performance"、"slow"、または "Core Web Vitals" について言及した場合
本番環境へのデプロイ前
新しい機能やページを追加した後
ユーザーが Next.js 固有の改善を要求した場合

前提条件の確認

ツール: Read, Grep

Next.js のバージョンを確認:

# package.json を読み込む
# "next": "^15.0.0" 以上であるか確認

App Router を検出 (Next.js 13 以降):
- app/ ディレクトリの有無を確認
- layout.tsx、page.tsx ファイルの有無を確認
Pages Router を検出 (レガシー):
- pages/ ディレクトリの有無を確認
- App Router への移行を提案

最適化のカテゴリ

1. レンダリング戦略の最適化

目標: 各ページ/コンポーネントに最適なレンダリングを選択する

ツール: Read, Grep, Edit

1.1 Server Components (App Router のデフォルト)

使用するタイミング:

API/データベースからのデータフェッチ
大量の計算
バックエンドリソースへのアクセス

パターン:

// app/dashboard/page.tsx
export default async function DashboardPage() {
  const data = await fetchData(); // サーバー上で実行
  return <Dashboard data={data} />;
}

違反の確認:

# 不要なコンポーネントで "use client" を検索
grep -r "use client" app/ | grep -v "onClick\|useState\|useEffect"

1.2 Client Components

使用するタイミング:

インタラクティブな UI (onClick, forms)
ブラウザ API (window, localStorage)
React hooks (useState, useEffect)

パターン:

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

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

最適化: クライアントコンポーネントを小さく、リーフノードに保つ

1.3 Static Generation (SSG)

使用するタイミング:

ほとんど変更されないコンテンツ
マーケティングページ、ブログ、ドキュメント

パターン:

export const revalidate = 3600; // 1時間ごとに再検証

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

1.4 Dynamic Rendering with ISR

使用するタイミング:

定期的に変更されるコンテンツ
E コマース製品、ユーザープロファイル

パターン:

export const revalidate = 60; // 1分ごとに再検証

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

2. 画像の最適化

目標: パフォーマンスと Core Web Vitals のために画像を最適化する

ツール: Grep, Read, Edit

2.1 Next.js Image Component を使用する

最適化されていない画像を見つける:

grep -rn "<img " app/ src/

以下に置き換える:

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority // Above-the-fold の画像の場合
  placeholder="blur" // オプションの blur-up エフェクト
/>

2.2 画像ドメインを構成する

next.config.js を読み込む:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
    ],
    formats: ['image/avif', 'image/webp'], // 最新の形式
  },
};

2.3 遅延読み込み戦略

priority: Above-the-fold の画像 (LCP 候補)
loading="lazy": Below-the-fold の画像 (デフォルト)

3. フォントの最適化

目標: FOUT/FOIT を排除し、フォントの読み込みを改善する

ツール: Read, Edit

3.1 next/font を使用する

パターン:

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

const inter = Inter({
  subsets: ['latin'],
  display: 'swap', // 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

import localFont from 'next/font/local';

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

4. データフェッチの最適化

目標: ウォーターフォールを最小限に抑え、キャッシュを最適化する

ツール: Read, Grep, Edit

4.1 並列データフェッチ

アンチパターン (逐次):

const user = await getUser();
const posts = await getPosts(user.id); // user を待機

最適化 (並列):

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

4.2 Streaming with Suspense

パターン:

import { Suspense } from 'react';

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

4.3 キャッシュ構成

// アグレッシブなキャッシュ
fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }, // 1時間キャッシュ
});

// キャッシュなし
fetch('https://api.example.com/data', {
  cache: 'no-store', // 常に最新
});

// キャッシュをオプトアウト
export const dynamic = 'force-dynamic';

5. バンドルの最適化

目標: JavaScript バンドルサイズを削減する

ツール: Bash, Read, Edit

5.1 バンドルを分析する

# package.json の scripts に追加
npm run build
npx @next/bundle-analyzer

5.2 Dynamic Imports

大きなコンポーネントを見つける:

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

Dynamic Imports で分割する:

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
  ssr: false, // 不要な場合は SSR をスキップ
});

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

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 <Dashboard data={data} />;
}

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 <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:

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:

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:

grep -rn "<img " app/ src/

Replace with:

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:

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:

// 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

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):

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

Optimized (Parallel):

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

4.2 Streaming with Suspense

Pattern:

import { Suspense } from 'react';

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

4.3 Cache Configuration

// 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

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

5.2 Dynamic Imports

Find large components:

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

Split with dynamic imports:

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:

grep -rn "export \* from" app/

Replace with specific imports:

// 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

// 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

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

// 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)

// 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

// 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

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

/* 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

// 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

// 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

// 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

# 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

# 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