mcpField
N
nextjs-performance

nextjs-performance

github.com/srbhrDevelopment28.9k63 installsUpdated 1w ago
Repository

About nextjs-performance

A performance development skill for Next.js projects, covering data loading, bundle size, Server Actions, and production builds. It is for developers optimizing frontend performance and checking critical implementation patterns before a change is submitted.

Key features

  1. 01Parallelize independent data fetches with Promise.all
  2. 02Handle slow requests with Suspense and deferred awaits
  3. 03Avoid barrel imports and dynamically load heavy components
  4. 04Require auth and ownership checks inside Server Actions
  5. 05Provide production build and pre-PR checklists

Use cases

  1. 01Reduce sequential waits for independent page data
  2. 02Control the size of a Next.js frontend bundle
  3. 03Review authorization and ownership checks in Server Actions

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/srbhr/resume-matcher --skill nextjs-performance

After installing, type/nextjs-performancein Claude Code to confirm it loaded.

Details

From the project README

Next.js Performance

Before Writing Code

  1. Read docs/agent/architecture/nextjs-critical-fixes.md for full patterns
  2. Check existing components in apps/frontend/components/

Critical Rules

Waterfalls
  • Use Promise.all() for independent fetches
  • Wrap slow data in <Suspense> boundaries
  • Defer await into branches where needed
// WRONG
const resumes = await fetchResumes();
const jobs = await fetchJobs();

// RIGHT
const [resumes, jobs] = await Promise.all([fetchResumes(), fetchJobs()]);
Bundle Size
  • NO barrel imports: import X from 'lucide-react' is WRONG
  • YES direct imports: import X from 'lucide-react/dist/esm/icons/x'
  • Use next/dynamic for heavy components (editors, charts, PDF)
  • Defer analytics with ssr: false
import dynamic from 'next/dynamic';
const HeavyEditor = dynamic(() => import('./HeavyEditor'), { ssr: false });
Server Actions
  • ALWAYS check auth INSIDE the action, not just middleware
  • Verify resource ownership before mutations
Production Build
  • Run npm run build && npm run start, NOT npm run dev
  • Docker must use standalone output

Pre-PR Checklist

[ ] No sequential awaits for independent data
[ ] Icons imported directly (not barrel)
[ ] Heavy components use next/dynamic
[ ] Server Actions have auth inside
[ ] Suspense around slow fetches

Comments

Markdown supported