82 lines
2.5 KiB
Markdown
82 lines
2.5 KiB
Markdown
# 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
|
|
|
|
```typescript
|
|
// 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)
|
|
|
|
```typescript
|
|
// 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:
|
|
|
|
```typescript
|
|
// 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. |