nextjs-react-expert

Identify and fix Next.js/React bottlenecks via prioritized performance rules.

8|Updated Feb 4, 2026
One-click install
npx skills add https://github.com/MisonL/Ling --skill nextjs-react-expert-misonl
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-react-expert
Source: https://github.com/MisonL/Ling/tree/main/.agents/skills/nextjs-react-expert
Command: npx skills add https://github.com/MisonL/Ling --skill nextjs-react-expert-misonl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Next.js 和 React 的性能优化规则帮助开发者识别并修复瀑布式请求、包体积膨胀、SSR/CSR 性能瓶颈等问题,将复杂的性能改进整理为易于执行的步骤。

Core Features & Use Cases

  • 提供 57 条按优先级组织的性能规则,覆盖 waterfall、bundle、server、client、rendering、js、advanced 等领域,用于组件开发、性能评审与代码审查。
  • 提供快速决策树和学习路径,帮助工程师在实际场景中快速定位并应用合适的优化策略。
  • 实际场景示例包括大型仪表盘、内容站点和电商应用的性能改进。

Quick Start

运行该技能对现有 Next.js 与 React 项目进行性能审计,并按优先级应用规则来提升可交互时间和首屏渲染。

Frequently Asked Questions about nextjs-react-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I identify and fix Next.js performance bottlenecks in my project?

To fix Next.js performance bottlenecks, audit your project against 57 prioritized rules covering waterfalls, bundle size, and SSR/CSR render paths to apply targeted optimizations like parallel data fetching and code-splitting.

What causes React hydration and SSR rendering performance issues?

React hydration and SSR rendering issues often stem from inefficient server and client render paths. Apply best practices for memoization, dynamic imports, and optimized SSR/CSR rendering to improve time-to-interactive and first-screen render.

How can I reduce React bundle size and eliminate data fetching waterfalls?

Reduce React bundle size and eliminate data fetching waterfalls by enforcing rule-based optimizations, enabling effective code-splitting, and replacing sequential data fetching with parallel data fetching patterns across your application architecture.

Does this Next.js optimization approach work for large e-commerce and dashboard apps?

Yes, the Next.js optimization rules are validated across diverse app sizes and architectures, providing practical performance improvement strategies specifically tailored for large dashboards, content sites, and e-commerce applications.

What is the best way to audit and improve React code-splitting and memoization?

The best way to audit React code-splitting and memoization is using a quick decision tree and prioritized rule set to locate appropriate optimization strategies, delivering measurable improvements in render paths and bundle reduction.