File Uploads
Create file upload with Server Actions:- Handle multipart form data- Stream to S3/Cloudinary- Show upload progress- Generate thumbnails- Update database
Build production-ready Next.js applications with Cursor IDE and Claude Code. These patterns cover App Router, Server Components, API routes, deployment strategies, and the cutting-edge features that make Next.js the go-to framework for React applications.
http://127.0.0.1:3845/sse
claude
in terminalclaude mcp add figma --transport sse http://127.0.0.1:3845/sse
/init
to create Next.js-specific CLAUDE.md{ "mcpServers": { "figma": { "type": "sse", "url": "http://127.0.0.1:3845/sse" } }}
# Next.js Development Rules
## Framework Conventions- Use App Router (app/ directory)- Server Components by default- Client Components only when needed ('use client')- Colocate components with routes- Use route groups for organization
## Performance Guidelines- Implement streaming SSR- Use dynamic imports for code splitting- Optimize images with next/image- Implement proper caching strategies- Use Partial Prerendering where applicable
## TypeScript Standards- Strict mode enabled- Use proper type inference- Avoid any types- Implement proper error boundaries
# PRD: Convert Figma designs to Next.js components# Plan: Use Figma MCP for Server/Client components
"Using Figma MCP, generate Next.js components from the selected design:1. Determine if it should be Server or Client component2. Use App Router conventions3. Apply shadcn/ui components where applicable4. Extract design tokens for theme"
# Example workflow"Select the Hero section in Figma and:- Generate as Server Component (no interactions)- Use next/image for optimized images- Apply responsive design with Tailwind- Extract color and spacing tokens"
// Extract Figma tokens to Next.js theme"Using Figma MCP get_variable_defs:1. Get all design system variables2. Generate tailwind.config.js extensions3. Create CSS variables for dynamic theming4. Set up dark mode support"
// Example output: tailwind.config.jsexport default { theme: { extend: { colors: { primary: { DEFAULT: '#1D4ED8', // Figma: Primary/Blue dark: '#1E40AF', // Figma: Primary/Dark light: '#3B82F6' // Figma: Primary/Light } }, spacing: { 'section': '5rem', // Figma: Spacing/Section 'component': '2rem' // Figma: Spacing/Component } } }}
Advanced Routing Structure:
Create a complex routing structure:1. Marketing pages with (marketing) route group2. Dashboard with (dashboard) route group and layout3. API routes in app/api/4. Parallel routes for modals5. Intercepting routes for photo gallery6. Dynamic segments with [...slug]7. Implement proper loading.tsx and error.tsx
Create server components that:- Fetch data directly in components- Use React cache() for deduplication- Implement streaming with Suspense- Handle errors with error boundaries- Use generateStaticParams for SSG- Implement revalidation strategies
Build a dashboard with Server Components:1. Layout with user data fetching2. Parallel data fetching for widgets3. Streaming individual components4. Client components for interactions5. Optimistic updates with useOptimistic6. Server Actions for mutations
Implement a complete form system:1. Server Action for form submission2. Zod validation on server3. useFormState for client state4. useFormStatus for pending states5. Optimistic updates6. Error handling with useActionState7. Revalidation after mutation
File Uploads
Create file upload with Server Actions:- Handle multipart form data- Stream to S3/Cloudinary- Show upload progress- Generate thumbnails- Update database
Real-time Updates
Implement real-time features:- Server-Sent Events setup- WebSocket integration- Optimistic UI updates- Conflict resolution- Presence indicators
RESTful API Pattern:
Create a complete REST API:1. CRUD endpoints in app/api/resources/2. Middleware for authentication3. Rate limiting with Upstash4. OpenAPI documentation5. Type-safe responses6. Error handling middleware7. CORS configuration
Set up tRPC with App Router:1. Create tRPC router2. App Router integration3. Type-safe API calls4. React Query integration5. WebSocket subscriptions6. Error handling7. Authentication context
Provider Configuration
Set up NextAuth with:- Multiple providers (Google, GitHub, Email)- Database sessions with Prisma- Custom signin/signout pages- Role-based access control- JWT with refresh tokens
Middleware Protection
Implement auth middleware:- Protect API routes- Redirect logic- Role checking- Session validation- Custom headers
Configure Prisma for production:1. Set up connection pooling2. Implement soft deletes3. Add audit fields (createdAt, updatedAt)4. Create seed scripts5. Optimize queries with include/select6. Implement transactions7. Add database indexes
Create a data access layer:- Repository pattern for models- Cached queries with unstable_cache- Type-safe database calls- Transaction helpers- Query builders- Migration strategies
Optimize static images:- Use next/image with sizing- Implement blur placeholders from Figma- Configure image domains- Use responsive images- WebP generation- CDN integration
# With Figma MCP:"Extract images from Figma design and:- Generate optimized next/image components- Create blur data URLs- Set proper width/height ratios"
Handle dynamic images:- On-demand optimization- Cloudinary integration- Avatar generation- Image transformation API- Caching strategies
Analyze and optimize bundles:1. Run bundle analyzer2. Implement dynamic imports3. Optimize third-party scripts4. Tree shake unused code5. Configure SWC minification6. Implement route-based chunking7. Monitor with SpeedCurve
Write comprehensive tests:1. Unit tests with Jest2. Component tests with React Testing Library3. Integration tests for API routes4. E2E tests with Playwright5. Visual regression with Percy6. Performance tests7. Accessibility tests
Create E2E test suite:- Test critical user flows- API integration tests- Authentication flows- Payment processes- Error scenarios- Mobile responsiveness- Performance benchmarks
Configure for Vercel:1. Environment variables2. Preview deployments3. Edge functions4. Analytics integration5. Speed insights6. Custom domains7. ISR configuration
Create production Docker setup:- Multi-stage build- Standalone output- Health checks- Graceful shutdown- Environment injection- Security scanning- Compose configuration
Implement i18n:1. Set up next-intl2. Route-based locales3. Content translation4. Date/number formatting5. SEO hreflang tags6. Language switcher7. Static generation per locale
Build multi-tenant app:1. Subdomain detection2. Database isolation3. Theme customization4. Feature flags5. Tenant-specific middleware6. Billing integration7. Admin portal
Implement comprehensive SEO:- Dynamic metadata API- Structured data- Sitemap generation- robots.txt- Open Graph images- Twitter cards- Schema markup
Set up analytics:- Vercel Analytics- Google Analytics 4- Custom events- Conversion tracking- Error tracking with Sentry- Performance monitoring- User behavior tracking
Implement error handling:1. Global error boundary2. Route-level error.tsx3. API error responses4. Logging with winston5. Sentry integration6. User-friendly messages7. Error recovery strategies
Configure caching:- Route segment config- Revalidate on demand- Time-based revalidation- Cache headers- CDN caching- Database query caching- Redis integration
Migrate from Pages Router:1. Analyze current routes2. Convert layouts3. Update data fetching4. Migrate API routes5. Update middleware6. Test thoroughly7. Gradual migration strategy