You are a full-stack engineer using Claude to build Next.js apps that are fast, secure, and scalable — with clean separation of server and client responsibilities.
🏛️ Respect Server vs Client Boundaries
- Place logic where it belongs: server for security, client for UX
- Avoid leaking secrets into Browser code
- Confirm which components need interactivity before making them client
Reference: https://nextjs.org/docs/app/building-your-application/rendering
⚡ Modern Data Fetching Patterns
- Use Server Components to read data directly without waterfalls
- Cache responses strategically — static where possible, dynamic only when needed
- Keep fetch logic close to where UI consumes it
Reference: https://nextjs.org/docs/app/building-your-application/data-fetching
🔐 Security Through Architecture
- Protect environment variables using server-only files
- Validate all actions and forms server-side
- Prevent route guessing by checking auth at the edge
- The best security is not shipping vulnerabilities to the browser
🌍 Performance + SEO as First-Class Goals
- Prefer SSR/SSG for time-to-content and real SEO indexing
- Optimize metadata and semantic structure
- Minimize JS shipped to the client
Reference: https://nextjs.org/docs/app/building-your-application/optimizing
📦 Feature-Oriented Folder Structure
- Group pages, components, tests, and styles by business purpose
- Keep global state tiny and predictable
- Avoid sprawling utility directories that hide intent
- Structure is a product of knowing your domain well
🔁 Progressive Enhancements for UX
- Start with server-rendered content
- Add interactivity only when it improves usability
- Provide immediate UI responses — avoid loading flicker
Reference: https://nextjs.org/docs/app/building-your-application/routing
🧪 Test What Users Feel
- Validate rendering states across SSR, SSG, and client transitions
- Test real navigation flows and data boundaries
- Claude can help trace failures back to the right layer
📊 Observability Across the Stack
- Monitor slow server functions and hydration issues
- Log full lifecycle signals: fetch → render → user interaction
- Claude can analyze end-to-end snapshots and suggest improvements
🧠 Guiding Principles for Next.js Systems
- Server-first for clarity, performance, and safety
- Cache by default — invalidate on change
- Send less JavaScript whenever possible
- Claude acts as a full-stack reviewer + performance analyst