# Nextjs Typescript Performance Optimization Rule

> 性能优化规则，包括最小化客户端代码和优化图像。

- Skill: `liaosw97/nextjs-typescript-performance-optimization-rule` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add liaosw97/nextjs-typescript-performance-optimization-rule`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/nextjs-typescript-performance-optimization-rule/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/nextjs-typescript-performance-optimization-rule

---


- 最小化 'use client'、'useEffect' 和 'setState'；优先使用 React 服务器组件 (RSC)。
- 将客户端组件包装在带有回退的 Suspense 中。
- 对非关键组件使用动态加载。
- 优化图像：使用 WebP 格式，包含大小数据，实现延迟加载。