菜单
Image, Font, Script, and Metadata optimization strategies. Use when optimizing Next.js images, fonts, scripts, or page metadata for performance. (triggers: **/layout.tsx, **/page.tsx, next/image, next/font, metadata, generateMetadata)
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/ComeOnOliver/skillshub --skill nextjs-optimization命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | nextjs-optimization |
| description | Image, Font, Script, and Metadata optimization strategies. Use when optimizing Next.js images, fonts, scripts, or page metadata for performance. (triggers: **/layout.tsx, **/page.tsx, next/image, next/font, metadata, generateMetadata) |
Core optimization primitives provided by Next.js. Monitor First, Optimize Later.
Before applying optimizations, identify bottlenecks using:
next/speed-insights, or React Profiler.Images: Always use next/image to prevent CLS (Cumulative Layout Shift). Set priority for above-the-fold images to improve LCP (Largest Contentful Paint). Use sizes (e.g., (max-width: 768px) 100vw, 33vw) and placeholder="blur" for better UX.
Fonts: use next/font (Google or Local) to optimize for Zero Layout Shift. This automatically host fonts locally and adds font-display: swap.
Scripts: Use next/script with appropriate strategies: beforeInteractive (critical), afterInteractive (default/analytics), or lazyOnload (lower priority/social widgets/chat).
Metadata: Define static metadata or use generateMetadata (async) for dynamic routes to improve SEO and social sharing. This replaces the legacy Head component.
Bundle: Analyze bundle size with @next/bundle-analyzer. Prune heavy libraries; use ESM-tree-shakable dependencies.
Components: Use dynamic imports (Next.js version of React.lazy) with Suspense for large components that are not needed during initial render.
Next.js 15+ Integration: Enable ppr: true (Partial Prerendering) in next.config.js to combine static shell with dynamic islands.
Strategy: Self-host Google Fonts or local files via next/font.
Optimization: Zero layout shift, no network requests for font files at runtime. Apply classes to <body> or specific elements.
Static: Export metadata object from layout.tsx or page.tsx.
export const metadata: Metadata = {
title: 'Dashboard',
description: '...',
};
Dynamic: Export generateMetadata({ params }) function.
export async function generateMetadata({ params }) {
const product = await getProduct(params.id);
return { title: product.name };
}
Open Graph: Use openGraph key for social cards.
next/script)strategy="afterInteractive" (Default): Google Analytics.strategy="lazyOnload": Chat widgets, low priority.<img> tag: Use next/image to prevent CLS and enable automatic optimization.next/font to self-host and eliminate layout shift._document.tsx: Use export const metadata or generateMetadata().<head>: Use next/script with appropriate strategy.