CopilotHub
SearchPromptsInstructionsAgentsToolsMCPs
  1. Home
  2. Instructions
  3. Next.js + Tailwind Development Instructions
Back to Instructions

Next.js + Tailwind Development Instructions

Coding standards for nextjs tailwind.instructions

typescript
react
0 downloads
33 views
0

Tags

testing
security
performance
best-practices
error-handling
api
database

Related Instructions

View all →

Python Docstring Standards

*.py

Write clear and consistent Python docstrings

python
python
documentation
+1
1
117

API Route Security

app/api/**/*.ts

Security best practices for Next.js API routes

typescript
nextjs
security
api
+2
0
113

TypeScript Error Handling

*.ts

Comprehensive error handling patterns for TypeScript applications

typescript
typescript
error-handling
+1
0
101

React Component Best Practices

*.tsx

Guidelines for creating maintainable and performant React components

typescript
react
react
typescript
+2
0
116

WordPress Development — Copilot Instructions

Coding standards for wordpress.instructions

typescript
testing
security
+5
1
185

VueJS 3 Development Instructions

Coding standards for vuejs3.instructions

typescript
react
testing
security
+6
0
157
Browse More Instructions

CopilotHub

A curated collection of prompts, instructions, agents, and tools for AI-powered development.

Quick Links

  • Prompts
  • Instructions
  • Agents
  • Tools
  • MCPs
  • Search

Browse by Category

  • Code Generation
  • Debugging
  • Documentation
  • Refactoring
  • Testing
  • Security

Legal

  • Guidelines
  • About
  • Privacy Policy
  • Terms of Service

Community

GitHub

© 2026 CopilotHub.

Next.js + Tailwind Development Instructions

Instructions for high-quality Next.js applications with Tailwind CSS styling and TypeScript.

Project Context

  • Latest Next.js (App Router)
  • TypeScript for type safety
  • Tailwind CSS for styling

Development Standards

Architecture

  • App Router with server and client components
  • Group routes by feature/domain
  • Implement proper error boundaries
  • Use React Server Components by default
  • Leverage static optimization where possible

TypeScript

  • Strict mode enabled
  • Clear type definitions
  • Proper error handling with type guards
  • Zod for runtime type validation

Styling

  • Tailwind CSS with consistent color palette
  • Responsive design patterns
  • Dark mode support
  • Follow container queries best practices
  • Maintain semantic HTML structure

State Management

  • React Server Components for server state
  • React hooks for client state
  • Proper loading and error states
  • Optimistic updates where appropriate

Data Fetching

  • Server Components for direct database queries
  • React Suspense for loading states
  • Proper error handling and retry logic
  • Cache invalidation strategies

Security

  • Input validation and sanitization
  • Proper authentication checks
  • CSRF protection
  • Rate limiting implementation
  • Secure API route handling

Performance

  • Image optimization with next/image
  • Font optimization with next/font
  • Route prefetching
  • Proper code splitting
  • Bundle size optimization

Implementation Process

  1. Plan component hierarchy
  2. Define types and interfaces
  3. Implement server-side logic
  4. Build client components
  5. Add proper error handling
  6. Implement responsive styling
  7. Add loading states
  8. Write tests