Comprehensive development rules for Next.js 14 chat application with TypeScript, Tailwind, JWT auth, and file-based storage. Covers code style, security, testing, documentation, and linting best practices.
Comprehensive development guidelines for building a Next.js 14 chat application with TypeScript, Tailwind CSS, JWT authentication, and file-based storage using the App Router architecture.
This skill provides coding rules and conventions for a Next.js 14 chat application (TempChat) using TypeScript, Tailwind CSS, JWT authentication with bcryptjs, and file-based JSON storage. The project follows Next.js App Router patterns with strict TypeScript mode.
1. **Always use TypeScript with strict mode enabled**
2. **Prefer explicit types over `any`** - use `unknown` if type is truly unknown
3. **Use interfaces from `@/types`** for shared data structures (User, Message, Attachment, etc.)
4. **Export types and interfaces** from `types/index.ts` for shared usage
5. **Use async/await** over promise chains
6. **Handle errors explicitly** with try-catch blocks
1. **Use Server Components by default** - only use `'use client'` when necessary
2. **Server Actions** should be in separate files or at bottom of Server Components
3. **Use `async` Server Components** for data fetching
4. **API routes** should be in `app/api/` directory following REST conventions
5. **Use `cookies()`** from `next/headers` for cookie management in Server Components
6. **Prefer Server Actions** over API routes when possible
1. Keep functions small and focused on a single responsibility
2. Extract reusable logic into utility functions in `lib/`
3. Use meaningful variable and function names
4. Add JSDoc comments for complex functions
5. Handle edge cases and error scenarios
6. Validate user input on both client and server side
1. **Never expose secrets** - use environment variables for JWT_SECRET, etc.
2. **Validate and sanitize** all user input
3. **Use httpOnly cookies** for session tokens
4. **Implement proper error handling** that doesn't leak sensitive information
5. **Use bcrypt** for password hashing
6. **Validate file uploads** (type, size) before saving
1. Use Server Components to reduce client-side JavaScript
2. Implement proper loading states and error boundaries
3. Optimize images if using Next.js Image component
4. Consider pagination for message history
5. Use React.memo for expensive components if needed
1. Use Tailwind CSS utility classes
2. Follow mobile-first responsive design
3. Keep custom CSS in `app/globals.css` minimal
4. Use Tailwind's design tokens (colors, spacing) consistently
1. File operations should use utilities from `lib/storage.ts`
2. Always ensure data directory exists before file operations
3. Handle file system errors gracefully
4. Validate data when reading from JSON files
1. **Check authentication**: Use `getSession()` from `lib/auth.ts` in Server Components
2. **Login/logout**: Use `setSession()` and `clearSession()`
3. **Protect routes**: Check session in page components or middleware
1. Return appropriate HTTP status codes in API routes
2. Provide user-friendly error messages
3. Log errors server-side for debugging
4. Use try-catch blocks for all async operations
1. **No unused variables** - remove or prefix with underscore (`_unusedVar`)
2. **No console.log in production** - use proper logging or remove
3. **Import order** - external → internal → relative, alphabetically within groups
4. **React hooks rules** - only call at top level, in correct order
5. **TypeScript errors** - treat as linting errors
6. **Accessibility** - use semantic HTML, proper ARIA attributes
7. **Performance** - avoid unnecessary re-renders
1. Run `npm run lint` locally before committing
2. Ensure TypeScript compiles without errors (`tsc --noEmit`)
3. Check for console.log statements and remove/replace
Add JSDoc comments for all exported functions, classes, and complex utilities:
```typescript
/**
* Verifies user password against stored hash
* @param username - The username to verify
* @param password - The plain text password
* @returns Promise resolving to true if password matches, false otherwise
* @throws {Error} If user lookup fails
*/
export async function verifyPassword(username: string, password: string): Promise<boolean>
```
1. **Code documentation**: JSDoc for exported functions and complex utilities
2. **Type documentation**: Document complex types and interfaces
3. **Inline comments**: Explain "why", not "what" - code should be self-documenting
4. **README**: Keep up to date with setup, environment variables, project structure
5. **API documentation**: Document all routes with method, parameters, responses, auth requirements
6. **Component documentation**: Document complex components with purpose, props, examples
1. Write self-documenting code - prefer clear names over comments
2. Use comments for business logic explanations
3. Document non-obvious workarounds or temporary solutions
4. Keep comments up to date with code changes
5. Remove commented-out code before committing
1. Place test files next to source files: `lib/auth.test.ts` for `lib/auth.ts`
2. Or use `__tests__` directory: `__tests__/auth.test.ts`
3. Test utilities in `lib/__tests__/` or `test-utils/` directory
4. Use descriptive test file names
```typescript
describe('verifyPassword', () => {
it('should return true for correct password', async () => {
// Arrange
const username = 'user1';
const password = 'user1pass';
// Act
const result = await verifyPassword(username, password);
// Assert
expect(result).toBe(true);
});
});
```
1. **Mock external dependencies** - file system, API calls, cookies
2. **Test edge cases** - empty inputs, null values, boundary conditions
3. **Test error scenarios** - invalid inputs, network failures, file errors
4. **Keep tests isolated** - each test should be independent
5. **Use meaningful assertions** - prefer specific matchers (`toBe`, `toEqual`)
6. **Clean up** - reset mocks and test data after each test
7. **Focus on critical paths** - auth, storage, API routes, user flows
1. Aim for high coverage on critical paths
2. Don't aim for 100% coverage - focus on meaningful tests
3. Cover error paths and edge cases
4. Test user-facing functionality thoroughly
1. Use factories or builders for creating test data
2. Keep test data minimal and focused
3. Use descriptive test data that explains the test case
4. Clean up test data after tests complete
1. Don't use `any` type - use proper types or `unknown`
2. Don't mix Server and Client Component patterns unnecessarily
3. Don't hardcode secrets or configuration values
4. Don't skip error handling
5. Don't create unnecessary API routes when Server Actions suffice
6. Don't bypass TypeScript type checking
7. Don't commit code with linting errors
8. Don't disable ESLint rules without justification
9. Don't leave console.log statements in production code
10. Don't write tests that depend on external services without mocking
11. Don't skip documentation for public APIs and complex logic
1. Check if types need to be added to `types/index.ts`
2. Create utility functions in `lib/` if reusable
3. Use Server Components unless client-side interactivity is required
4. Follow existing patterns for authentication and session management
5. Update relevant type definitions before implementing features
6. Add tests for new functionality
7. Document new APIs and complex logic
8. Run linting and TypeScript checks before committing
When working on TempChat project code:
1. **Always enforce TypeScript strict mode** - no implicit any, proper typing
2. **Follow Next.js 14 App Router conventions** - Server Components by default
3. **Use the established patterns** - auth via `lib/auth.ts`, storage via `lib/storage.ts`
4. **Write secure code** - validate inputs, use httpOnly cookies, hash passwords
5. **Document as you code** - JSDoc for functions, comments for complex logic
6. **Test critical paths** - especially auth, storage, and API routes
7. **Lint before suggesting** - ensure code passes ESLint rules
8. **Organize imports** - external → internal → relative, alphabetically
9. **Handle errors gracefully** - try-catch blocks, user-friendly messages
10. **Keep it simple** - prefer straightforward solutions over over-engineering
When suggesting code changes:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nextjs-14-tempchat-development-rules/raw