217 lines
5.4 KiB
Markdown
217 lines
5.4 KiB
Markdown
# Boilerplate Templates
|
|
|
|
This directory contains template files to help you quickly create new components, pages, API routes, hooks, and database models with consistent patterns and best practices.
|
|
|
|
## Available Templates
|
|
|
|
### 1. Page Template (`page.template.tsx`)
|
|
|
|
Use this template to create new Next.js pages with proper metadata and SEO setup.
|
|
|
|
**Features:**
|
|
|
|
- Metadata generation with SEO optimization
|
|
- Responsive layout structure
|
|
- Examples for static and dynamic pages
|
|
- Proper TypeScript types
|
|
|
|
**Usage:**
|
|
|
|
```bash
|
|
# Copy the template
|
|
cp templates/page.template.tsx app/my-new-page/page.tsx
|
|
|
|
# Replace TEMPLATE_NAME with your page name
|
|
# Update metadata and content
|
|
```
|
|
|
|
### 2. Component Template (`component.template.tsx`)
|
|
|
|
Create reusable React components with proper TypeScript interfaces and styling patterns.
|
|
|
|
**Features:**
|
|
|
|
- TypeScript interface definitions
|
|
- Multiple component patterns (client/server, compound, forwardRef)
|
|
- Loading states and error handling
|
|
- Tailwind CSS with custom UI patterns
|
|
- Accessibility considerations
|
|
|
|
**Usage:**
|
|
|
|
```bash
|
|
# Copy the template
|
|
cp templates/component.template.tsx components/MyComponent.tsx
|
|
|
|
# Replace TEMPLATE_NAME and implement your logic
|
|
```
|
|
|
|
### 3. API Route Template (`api-route.template.ts`)
|
|
|
|
Build robust API endpoints with validation, authentication, and error handling.
|
|
|
|
**Features:**
|
|
|
|
- Full CRUD operations (GET, POST, PUT, DELETE)
|
|
- Zod validation schemas
|
|
- Authentication middleware integration
|
|
- Consistent error handling
|
|
- Request/response TypeScript types
|
|
- Pagination support
|
|
|
|
**Usage:**
|
|
|
|
```bash
|
|
# Copy the template
|
|
cp templates/api-route.template.ts app/api/my-endpoint/route.ts
|
|
|
|
# Update schemas and implement business logic
|
|
```
|
|
|
|
### 4. Custom Hook Template (`hook.template.ts`)
|
|
|
|
Create custom React hooks with proper patterns and optimizations.
|
|
|
|
**Features:**
|
|
|
|
- TanStack Query integration
|
|
- State management patterns
|
|
- Debouncing and cleanup
|
|
- Multiple hook patterns (simple state, localStorage, API)
|
|
- TypeScript generics
|
|
|
|
**Usage:**
|
|
|
|
```bash
|
|
# Copy the template
|
|
cp templates/hook.template.ts hooks/useMyHook.ts
|
|
|
|
# Replace TEMPLATE_NAME and implement your logic
|
|
```
|
|
|
|
### 5. Database Model Template (`model.template.ts`)
|
|
|
|
Build Mongoose models with Zod validation and proper TypeScript types.
|
|
|
|
**Features:**
|
|
|
|
- Zod schema validation
|
|
- Mongoose schema with indexes
|
|
- Instance and static methods
|
|
- Middleware for data processing
|
|
- Virtual fields
|
|
- Full TypeScript support
|
|
|
|
**Usage:**
|
|
|
|
```bash
|
|
# Copy the template
|
|
cp templates/model.template.ts models/MyModel.ts
|
|
|
|
# Define your schema and methods
|
|
```
|
|
|
|
## Template Conventions
|
|
|
|
### Naming Conventions
|
|
|
|
- **Files**: Use descriptive names in kebab-case or camelCase
|
|
- **Components**: Use PascalCase for component names
|
|
- **Variables**: Use camelCase for variables and functions
|
|
- **Constants**: Use UPPER_SNAKE_CASE for constants
|
|
|
|
### Code Organization
|
|
|
|
- Group related imports together
|
|
- Define types and interfaces at the top
|
|
- Implement main logic in the middle
|
|
- Export statements at the bottom
|
|
- Add JSDoc comments for complex functions
|
|
|
|
### Error Handling
|
|
|
|
- Always wrap async operations in try-catch blocks
|
|
- Use proper HTTP status codes for API routes
|
|
- Provide meaningful error messages
|
|
- Log errors for debugging
|
|
|
|
### TypeScript Best Practices
|
|
|
|
- Define proper interfaces for props and return types
|
|
- Use generics where appropriate
|
|
- Avoid `any` type - use `unknown` if needed
|
|
- Leverage union types for variants
|
|
|
|
### Security Considerations
|
|
|
|
- Always validate input data with Zod schemas
|
|
- Use authentication middleware for protected routes
|
|
- Sanitize user inputs
|
|
- Follow principle of least privilege
|
|
|
|
## Quick Start Guide
|
|
|
|
1. **Choose the appropriate template** for your use case
|
|
2. **Copy the template file** to your desired location
|
|
3. **Replace placeholder names** (TEMPLATE_NAME, etc.)
|
|
4. **Update imports** to match your project structure
|
|
5. **Implement your specific logic**
|
|
6. **Test your implementation**
|
|
|
|
## Example Workflow
|
|
|
|
Creating a new feature called "Tasks":
|
|
|
|
```bash
|
|
# 1. Create the model
|
|
cp templates/model.template.ts models/task.ts
|
|
# Edit: Define Task schema, add methods
|
|
|
|
# 2. Create API routes
|
|
cp templates/api-route.template.ts app/api/tasks/route.ts
|
|
# Edit: Implement CRUD operations for tasks
|
|
|
|
# 3. Create custom hook
|
|
cp templates/hook.template.ts hooks/useTask.ts
|
|
# Edit: Add task-specific logic and API calls
|
|
|
|
# 4. Create components
|
|
cp templates/component.template.tsx components/TaskCard.tsx
|
|
cp templates/component.template.tsx components/TaskList.tsx
|
|
# Edit: Implement task UI components
|
|
|
|
# 5. Create pages
|
|
cp templates/page.template.tsx app/tasks/page.tsx
|
|
cp templates/page.template.tsx app/tasks/[id]/page.tsx
|
|
# Edit: Build task management pages
|
|
```
|
|
|
|
## Template Customization
|
|
|
|
Feel free to modify these templates to match your project's specific needs:
|
|
|
|
- Add your own validation patterns
|
|
- Include additional dependencies
|
|
- Modify styling approaches
|
|
- Add project-specific utilities
|
|
- Update error handling patterns
|
|
|
|
## Contributing to Templates
|
|
|
|
When improving templates:
|
|
|
|
1. Keep them generic and reusable
|
|
2. Add comprehensive comments and examples
|
|
3. Follow established patterns in the codebase
|
|
4. Test templates with real use cases
|
|
5. Update this README with changes
|
|
|
|
## Support
|
|
|
|
If you encounter issues with templates or need additional patterns:
|
|
|
|
1. Check existing implementations in the codebase
|
|
2. Review Next.js and React documentation
|
|
3. Consult TypeScript best practices
|
|
4. Ask for help in team discussions
|