From harness-claude
Reduces bundle size and optimizes runtime performance for Next.js production deployments using bundle analysis, dynamic imports, and code splitting.
How this skill is triggered — by the user, by Claude, or both
Slash command
/harness-claude:next-deployment-optimizationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Reduce bundle size, split code strategically, and optimize runtime performance for production
Reduce bundle size, split code strategically, and optimize runtime performance for production
ANALYZE=true next build with @next/bundle-analyzer to identify large modules in the bundle.next/dynamic to lazy load Client Components that are not needed for initial render.{ ssr: false } to next/dynamic for components that use browser-only APIs (window, document, navigator).import() directly inside Server Components for code splitting without next/dynamic.experimental.optimizePackageImports in next.config.ts for icon and component libraries to tree-shake unused exports.next/font to self-host fonts with zero layout shift — fonts are downloaded at build time.// next.config.ts — bundle analyzer and package optimization
import type { NextConfig } from 'next';
import bundleAnalyzer from '@next/bundle-analyzer';
const withBundleAnalyzer = bundleAnalyzer({
enabled: process.env.ANALYZE === 'true',
});
const config: NextConfig = {
experimental: {
optimizePackageImports: ['lucide-react', '@radix-ui/react-icons', 'date-fns'],
},
};
export default withBundleAnalyzer(config);
// app/editor/page.tsx — lazy load heavy Client Component
import dynamic from 'next/dynamic';
const RichTextEditor = dynamic(() => import('@/components/rich-text-editor'), {
loading: () => <p>Loading editor...</p>,
ssr: false, // editor uses window APIs
});
export default function EditorPage() {
return <RichTextEditor />;
}
// app/fonts.ts — self-hosted fonts
import { Inter, Fira_Code } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
export const firaCode = Fira_Code({ subsets: ['latin'], variable: '--font-fira-code' });
Next.js performs automatic code splitting at the route level — each page only loads its own JavaScript. Additional optimization opportunities exist at the component and library level.
Bundle analyzer workflow: Install @next/bundle-analyzer, add it to next.config.ts, run ANALYZE=true next build. Two treemaps open (client and server bundles). Look for unexpectedly large modules, duplicated libraries (two versions of the same package), and server-only code in the client bundle.
next/dynamic vs React.lazy: next/dynamic wraps React.lazy and adds Next.js-specific features: ssr: false, loading components, and named export support. Use next/dynamic in Next.js projects — React.lazy works too but lacks these features.
ssr: false use cases: Components that import browser APIs at module level (not just in event handlers) must use ssr: false. Common examples: maps (Leaflet, Mapbox), rich text editors (Quill, TipTap), WebGL renderers.
optimizePackageImports: Icon libraries like lucide-react export hundreds of icons. Without tree-shaking, importing one icon pulls in the entire library. optimizePackageImports tells Next.js to rewrite imports to their direct module paths, enabling tree-shaking.
Standalone output: For Docker deployments, set output: 'standalone' in next.config.ts. This produces a minimal build artifact with only the production dependencies needed, significantly reducing Docker image size.
https://nextjs.org/docs/app/building-your-application/optimizing
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeOptimizes Next.js apps for Core Web Vitals (LCP, INP, CLS) via image/font optimization, caching with unstable_cache/revalidateTag, Server Components, Suspense streaming, and bundle reduction. Supports Next.js 16 + React 19.
Guides building, debugging, and architecting Next.js App Router apps: routing, Server Components, Server Actions, layouts, middleware, data fetching, rendering strategies, Vercel deployment.
Optimizes Next.js frontend performance using Lighthouse audits, bundle analysis, and animation best practices. Diagnoses slow pages, reduces bundle size, and improves Core Web Vitals (LCP, TBT, CLS).