nextjs-tree-shaking

What problem does it solve?

This skill helps teams optimize Next.js 15 bundle size by converting default exports to named exports and refactoring barrel files to improve tree-shaking and load performance.

Core Features & Use Cases

• Convert default exports to named exports to enhance tree-shaking and reduce bundle size.
• Refactor barrel files (index.ts) to use explicit named re-exports for better static analysis.
• Configure Next.js optimizePackageImports in next.config.mjs for granular bundling optimization.
• Use the 'use cache' directive for function-level caching in Next.js 15 (experimental) to improve caching and HMR performance.
• Applicable to Next.js 15 apps using App Router, server components, and complex component libraries.

Quick Start

Use the Next.js tree-shaking skill to audit your project and begin the migration:

• Run: npx @silverassist/performance-toolkit --audit-exports to identify default export hotspots.
• Convert identified default exports to named exports in key components and update barrel files.
• Update next.config.mjs to enable optimizePackageImports and incorporate Next.js 15 caching directives.