Agent-skills-standard nextjs-optimization

Optimize images, fonts, scripts, and metadata for Next.js performance and Core Web Vitals. Use when configuring next/image for LCP, next/font for zero layout shift, next/script loading strategies, or generateMetadata for SEO. (triggers: **/layout.tsx, **/page.tsx, next/image, next/font, metadata, generateMetadata)

install

source · Clone the upstream repo

git clone https://github.com/HoangNguyen0403/agent-skills-standard

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/HoangNguyen0403/agent-skills-standard "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/nextjs/nextjs-optimization" ~/.claude/skills/hoangnguyen0403-agent-skills-standard-nextjs-optimization && rm -rf "$T"

manifest: skills/nextjs/nextjs-optimization/SKILL.md

source content

Optimization

Priority: P1 (HIGH)

Core optimization primitives provided by Next.js. Monitor First, Optimize Later.

Monitoring (Core Web Vitals)

LCP (Largest Contentful Paint): Target < 2.5s.
CLS (Cumulative Layout Shift): Target < 0.1.
INP (Interaction to Next Paint): Target < 200ms.
Tools: Chrome DevTools "Performance" tab,
```
next/speed-insights
```
,
```
React Profiler
```
.

Images

Always use

next/image

to prevent CLS and enable automatic optimization:

See implementation examples

Fonts

Use

next/font

for zero layout shift — self-hosts fonts and adds

font-display: swap

See implementation examples

Metadata (SEO)

See implementation examples

Scripts

Use

next/script

with appropriate loading strategies:

```
beforeInteractive
```
: Critical scripts (polyfills).
```
afterInteractive
```
: Analytics (Google Analytics).
```
lazyOnload
```
: Chat widgets, social embeds.

Bundle & Components

Analyze with
```
@next/bundle-analyzer
```
. Prune heavy libraries; use ESM-tree-shakable dependencies.
Use
```
dynamic
```
imports with
```
Suspense
```
for large components not needed at initial render.
Enable
```
ppr: true
```
(Partial Prerendering) in Next.js 15+ for static shell + dynamic islands.

Anti-Patterns

No
<img>
tag: Use
```
next/image
```
to prevent CLS and enable automatic optimization.
No Google Fonts CDN link: Use
```
next/font
```
to self-host and eliminate layout shift.

No metadata in
_document.tsx
: Use

export const metadata

generateMetadata()

No 3rd-party scripts in
<head>
: Use
```
next/script
```
with appropriate
```
strategy
```
.