API & Utilities Organization

This directory contains the API client and utility functions used throughout the application.

Directory Structure

lib/
├─ api.ts                # Main API entry point
├─ api-client.ts         # Client-side API functions
├─ server-api.ts         # Server-side API functions
├─ services/             # Service modules
│  ├─ index.ts           # Service re-exports
│  ├─ product-service.ts # Product API
│  ├─ shipping-service.ts # Shipping API
│  └─ stats-service.ts   # Statistics API
├─ utils/                # Utility functions
│  └─ index.ts           # Utility re-exports
├─ types.ts              # Common TypeScript types
├─ utils.ts              # General utilities
├─ auth-utils.ts         # Authentication utilities
└─ styles.ts             # Styling utilities

API Structure

api.ts - The main API entry point that re-exports all API functionality
api-client.ts - Client-side API functions and types
server-api.ts - Server-side API functions (for server components in the app/ directory)

How to Use

In Client Components

// Import what you need from the main API module
import { clientFetch, getCustomers, getProducts } from '@/lib/api';

// Example usage
const customers = await getCustomers(1, 25);
const products = await getProducts(1, 10);

In Server Components (app/ directory only)

// Server functions only work in Server Components in the app/ directory
import { getCustomersServer } from '@/lib/api';

// In a Server Component
export default async function Page() {
  const customers = await getCustomersServer(1, 25);
  // ...
}

Server Components Compatibility

The server-side API functions (fetchServer, getCustomersServer, etc.) can only be used in Server Components within the app/ directory. They will throw an error if used in:

Client Components
The pages/ directory
Any code that runs in the browser

This is because they rely on Next.js server-only features like the cookies() function from next/headers.

Utilities

For utilities, you can either import specific functions or use the utils index:

// Import specific utilities
import { cn } from '@/lib/utils';
import { getAuthToken } from '@/lib/auth-utils';

// Or import from the utils index
import { cn, getAuthToken } from '@/lib/utils';

Backward Compatibility

For backward compatibility, many functions are also re-exported from their original locations.