skills.rest
dankofly
dankoflyCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-performance

Optimize Next.js apps by preventing waterfalls, reducing bundles, and hardening Server Actions.

Updated Mar 5, 2026
Search Tags:#performance#react#optimization#nextjs#data-fetching#server-actions#bundle-size
One-click install
npx skills add https://github.com/dankofly/Swing_B2B --skill nextjs-performance-dankofly
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-performance
Source: https://github.com/dankofly/Swing_B2B/tree/main/.claude/skills/nextjs-performance
Command: npx skills add https://github.com/dankofly/Swing_B2B --skill nextjs-performance-dankofly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js performance issues lead to slow page loads, jank, and production build risks.

Core Features & Use Cases

  • Waterfall avoidance: parallelize independent data fetches with Promise.all and Suspense boundaries.
  • Bundle-size optimization: avoid barrel imports, prefer direct imports, and use next/dynamic for heavy components.
  • Server Actions hardening: validate auth inside actions and ensure resource ownership checks.
  • Production build reliability: proper build and runtime commands and Docker standalone output.

Quick Start

Refactor the Next.js app to apply these performance patterns and validate improvements in a production-like environment.

Frequently Asked Questions about nextjs-performance

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

FAQPage Schema
How do I fix Next.js data fetching waterfalls and reduce slow page loads?▼

Fix Next.js performance waterfalls by parallelizing independent fetches with Promise.all and wrapping components in Suspense boundaries. This prevents sequential rendering and improves page load speed.

What is the best way to reduce Next.js bundle size for heavy components?▼

Reduce Next.js bundle size by avoiding barrel imports, preferring direct imports, and using next/dynamic for heavy components. This splits JavaScript payloads and decreases initial load times.

How do I harden Next.js Server Actions against unauthorized access?▼

Harden Next.js Server Actions by validating authentication inside the action and ensuring resource ownership checks. This prevents unauthorized mutations and protects data during server-side routing.

Does this Next.js optimization approach handle production builds and Docker output?▼

Yes, this Next.js optimization approach handles production builds by enforcing proper build and runtime commands alongside Docker standalone output. This ensures safe production-ready behavior and reliable SSR considerations.

Why does my Next.js app experience jank during component rendering?▼

Your Next.js app experiences jank during component rendering due to sequential data fetches and large JavaScript bundles. Refactoring to parallelize fetches with Suspense and using next/dynamic mitigates these rendering bottlenecks.

Related Skills

Explore More Software Engineering Skills→
am-willam-will
1.0k

vercel-react-best-practices

Apply React and Next.js performance best practices to components, pages, and data fetching.

Community
Advanced
putto11262002putto11262002

data-fetching

Optimize server-side data fetching and caching in Next.js 16+ applications.

Community
Advanced
hospitaljobsinhospitaljobsin
7

nextjs-app-router

Structure Next.js 13+ App Router applications with server components and routing patterns.

Official
Advanced
Mte90Mte90
51

Next.js Rendering Strategies

Guide Next.js rendering strategy selection for SSG, SSR, ISR, Streaming, and PPR.

Community
Intermediate