nextjs15-performance

Optimize Next.js 15 data fetching and bundle performance with established patterns.

Updated Mar 5, 2026
One-click install
npx skills add https://github.com/dankofly/Swing_B2B --skill nextjs15-performance-dankofly
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs15-performance
Source: https://github.com/dankofly/Swing_B2B/tree/main/.claude/skills/nextjs15-performance
Command: npx skills add https://github.com/dankofly/Swing_B2B --skill nextjs15-performance-dankofly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill documents targeted fixes and patterns to eliminate common Next.js 15 performance regressions such as data-fetching waterfalls, oversized client bundles, and insecure Server Actions, enabling faster page loads and safer server-side mutations.

Core Features & Use Cases

  • Waterfall prevention: Use Promise.all for independent fetches, defer awaits into branches, and wrap slow data in Suspense boundaries to avoid sequential blocking.
  • Bundle size reduction: Prefer direct icon and component imports, use next/dynamic to lazy-load heavy components, and defer analytics to client-only loads.
  • Server Actions safety: Enforce auth and resource-ownership checks inside Server Actions rather than relying solely on middleware.
  • Production readiness: Ensure builds run with production commands and that containerized deployments use standalone output instead of dev mode.
  • Use Case: During a PR review of a Next.js frontend, apply these checks to convert sequential awaits to parallel fetches, replace barrel imports with direct icon imports, and add Suspense or dynamic imports around heavy UI components.

Quick Start

Audit the frontend for sequential awaits, direct barrel imports, heavy components without dynamic loading, and Server Actions missing internal auth checks and propose concrete code changes.

Frequently Asked Questions about nextjs15-performance

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

FAQPage Schema
How to fix data fetching waterfalls in Next.js 15?

To fix data fetching waterfalls in Next.js 15, use Promise.all for parallel fetching, defer awaits into branches, and wrap slow data in Suspense boundaries to prevent sequential blocking.

How do I reduce client bundle size in Next.js?

Reduce client bundle size in Next.js by using direct icon imports instead of barrel imports, applying next/dynamic to lazy-load heavy components, and deferring analytics to client-only loads.

Do Server Actions in Next.js 15 need auth checks inside the action?

Server Actions in Next.js 15 require auth checks inside the action itself to ensure server-side mutations are safer, rather than relying solely on middleware for authorization.

What is the best way to use Suspense for slow data in Next.js?

The best way to use Suspense for slow data in Next.js is wrapping the slow data components in Suspense boundaries, allowing the rest of the page to load without waiting for sequential blocking.

How to ensure Next.js production builds run correctly in containers?

Ensure Next.js production builds run correctly in containers by running builds with production commands and configuring containerized deployments to use standalone output instead of dev mode.