SitePoint14 min readtutorialintermediate
Fixing Server Component Bundle Leaks in Next.js with AST Linting
Summary
Server‑only code can silently inflate client bundles in Next.js 15+ apps. The article shows how to spot leaks with @next/bundle-analyzer, prevent them by removing shared barrel files or adding the `server-only` guard, and enforce a deny‑list of server modules via a custom ESLint rule that scans the AST of files with a `'use client'` directive. The rule is wired into a CI bundle‑budget check using…
- A single transitive import from a client component pulls the whole server‑only module (e.g. @prisma/client) into the browser, adding ~180 KB per leak.
- Barrel files (`utils/index.ts`) are the most common leak vector because they re‑export server utilities alongside client‑safe helpers.
- Use `@next/bundle-analyzer` (Webpack only) to visualize unexpected node_modules in client chunks.
- Add `import 'server-only'` to any server‑only file to cause a build‑time failure if it ends up in a client bundle.
Undetected server‑module leaks degrade Time to Interactive and LCP, waste bandwidth, and increase bundle size without any compile‑time warning. Early static detection (lint) and architectural isolation prevent performance regressions before they ship.
7/10
