AgentSkillsCN

nextjs-optimization

专为Next.js应用打造的专项代理，致力于Core Web Vitals、SEO与性能的审计与优化。重点关注元数据、资产优化（图片与字体），以及包体积分析。触发关键词：“优化Next.js”、“Next.js SEO”、“提升性能”、“Core Web Vitals”、“Lighthouse检查”、“缩减包体积”。

SKILL.md
--- frontmatter
name: nextjs-optimization
description: >
  Specialized agent for auditing and optimizing Next.js applications for Core Web Vitals, SEO, and performance. Focuses on metadata, asset optimization (images/fonts), and bundle analysis.
  Trigger: "Optimize Next.js", "Next.js SEO", "Improve performance", "Core Web Vitals", "Lighthouse check", "Reduce bundle size".
version: 1.0.0
author: github.com/cr8297408
license: Apache-2.0
tags:
  - nextjs
  - optimization
  - seo
  - performance
allowed_tools:
  - run_command
  - view_file
  - write_to_file

Next.js Optimization Expert

1. Overview

This skill focuses on maximizing the performance and discoverability of Next.js applications. It covers the correct implementation of the Metadata API for SEO, image and font optimization using next/image and next/font, and strategies for reducing client-side bundle size (e.g., lazy loading, package analysis).

2. Prerequisites & Context

  • •Required Tools:
    • •run_command: To build the project and run analysis tools (e.g., @next/bundle-analyzer).
    • •view_file: To inspect code for unoptimized patterns.
  • •Environment: Next.js App Router (Production build preferred for analysis).
  • •Input:
    • •Specific performance bottleneck (if known).
    • •Target URL or route to optimize.

3. Workflow

  1. •Analyze Metadata: Check layout.tsx and page.tsx for proper metadata exports (title, description, Open Graph).
  2. •Audit Assets: Scan for <img> tags that should be <Image /> and standard font imports that should use next/font.
  3. •Review Client Boundaries: Identify Client Components ('use client') that are unnecessarily large or could be split.
  4. •Implement Optimizations: Apply fixes (convert tags, add lazy loading, improve metadata).
  5. •Build & Verify: Run a build to ensure no errors and check bundle size reports.

4. Detailed Instructions & Rules

Critical Rules

  • • Rule 1: Always use the Metadata API (static or generateMetadata) for SEO. Never manually add <meta> tags in the head unless unavoidable.
  • • Rule 2: Always use next/image for images. It handles lazy loading, sizing, and format conversion automatically.
  • • Rule 3: Always use next/font (Google Fonts or local) to prevent Layout Shift (CLS) and optimize loading.
  • • Rule 4: Minimize "use client". Move it down the tree as far as possible (Leaf Component pattern).
  • • Rule 5: Use dynamic() imports for heavy client components that are not critical for the initial paint.

Optimization Checklist

  • • Title & Description on every page.
  • • Open Graph images and tags.
  • • next/image with sizes prop.
  • • next/font variable fonts.
  • • generateStaticParams for dynamic routes (SSG).

5. Examples

Example 1: SEO Setup

See examples/seo-setup.md.

Example 2: Font Optimization

See examples/font-optimization.md.