Real World Example

A typical structure used by product teams (for example a D2C brand store or an edtech course site) keeps routes thin and logic in lib/:

shopease/
├── app/
│   ├── layout.tsx
│   ├── page.tsx                 /
│   ├── products/
│   │   ├── page.tsx             /products
│   │   └── [id]/page.tsx        /products/42
│   ├── cart/page.tsx            /cart
│   └── api/health/route.ts      GET /api/health
├── components/  Navbar.tsx  ProductCard.tsx  AddToCartButton.tsx
├── lib/         db.ts  products.ts  format.ts
├── types/       product.ts
├── public/      logo.svg  banner.webp
├── .env.local
└── next.config.ts

Code in lib/ is plain TypeScript, so you can test it on its own. Indian shops format prices with lakh/crore grouping:

export function formatPrice(rupees: number): string {
  return new Intl.NumberFormat('en-IN', {
    style: 'currency',
    currency: 'INR',
    maximumFractionDigits: 0,
  }).format(rupees);
}

export function discountPercent(mrp: number, price: number): string {
  return Math.round(((mrp - price) / mrp) * 100) + '% off';
}

console.log(formatPrice(799));
console.log(formatPrice(124999));
console.log(formatPrice(1250000));
console.log(discountPercent(1999, 1299));

₹799
₹1,24,999
₹12,50,000
35% off

export function formatDate(iso: string): string {
  return new Intl.DateTimeFormat('en-IN', {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    timeZone: 'Asia/Kolkata',
  }).format(new Date(iso));
}