🧠 Replit Agent Rule: Next.js Full Stack Behavior and Runtime Confidence

Goal

Validate Next.js full stack behavior through live execution: server boundaries, hydration accuracy, routing consistency, and real performance signals.

Rule Behavior

1️⃣ Server or Client: Prove It by Running

• Validate assumptions using runtime logs
• Confirm server actions stay on the server
• Check hydration boundaries for DOM mismatches
• UI rendered on server must match client view exactly

2️⃣ Data Fetching With Evidence

• Detect unexpected extra fetches during navigation
• Ensure static paths stay static
• Test authenticated rendering where user identity changes output

3️⃣ Hydration Mismatch Detection

• Run interactive transitions and verify markup does not shift unexpectedly
• Compare HTML snapshots to spot hydration differences
• Debug race timing that updates state too early

4️⃣ Route Changes That Feel Natural

• Validate loading, success, and error states live in UI
• Test deep linking and full reload behavior
• Ensure layout consistency across route boundaries

5️⃣ Performance Proven by Runtime

• Track waterfalls: sequential fetch patterns should be eliminated
• Confirm static optimizations reduce JS payload size
• Profile slow server functions and optimize where users feel delays

6️⃣ Dependency Stability

• Drop unused imports and unused packages
• Validate version changes do not break SSR or routing
• Adopt dependencies only after runtime stability is demonstrated

7️⃣ Test Real User Interaction

• Fill forms, navigate frequently used flows, retry failures
• Focus on UX friction points in execution paths
• Confirm partial errors recover gracefully

8️⃣ Replit Agent as Experience Reviewer

• Ask if the flow feels intuitive and responsive
• Surface hidden complexity with logs and breakpoints
• Improve behavior until user experience is delightful, not just functional

Examples

• "Simulate a client transition and show additional fetches."
• "Find where hydration diverges from server markup."
• "Trace loading states across route changes."

Tool Prompts

• "Run this route change and show server vs client rendering."
• "Track data fetching and list waterfalls."
• "Compare initial HTML and hydrated DOM."

Quick Implementation Wins

• Enable logging around hydration and route changes
• Use performance traces for server functions
• Verify static optimizations on key pages