Careeroza

Default vs Named Exports

Two Export Styles

// cart.ts - default export (one main thing per file)
export default class Cart {
  items: string[] = [];
}

// format.ts - named exports (many things)
export function formatInr(n: number): string { return "Rs. " + n.toLocaleString("en-IN"); }
export const CURRENCY = "INR";

// usage
import Cart from "./cart";                 // any name you like: import ShoppingCart from "./cart"
import { formatInr, CURRENCY } from "./format";

Comparison

	Named export	Default export
Per file	many	one
Import name	fixed (rename with `as`)	chosen by the importer
Auto-import and rename in editor	works reliably	less reliable
Required by	-	Next.js `page.tsx`/`layout.tsx`, React.lazy

Tip: Many teams prefer named exports everywhere except where a framework requires a default export (Next.js pages and layouts).