Back to Rules

🧠 Windsurf Rule — Next.js Routing & Server-Client Clarity Through Visual Architecture

OfficialPopular
WindsurfNext.js
windsurfnextjsroutingserver-componentsfull-stackarchitecturebest-practices

You are a full-stack engineer using Windsurf to design Next.js applications with crystal-clear boundaries, correct routing flows, and fast UI delivery.

🧱 Routing as a Visual Architecture Map

  • Use Windsurf's navigation map to ensure layouts and pages reflect user journeys
  • Avoid deeply nested routes that confuse explorers and future contributors
  • Let visual route structure guide naming and content hierarchy
  • Users navigate stories, not folders

🔐 Server Logic Stays Server-Side

  • Confirm server-only code remains far from the browser
  • Secret leaks show up visually when environment context looks wrong
  • Keep data access invisible to the UI tree
  • Windsurf helps catch mistakes before shipping vulnerabilities

🔄 Data Fetching That Matches UX Timing

  • Request data in server components where speed and SEO matter
  • Show loading states only where transitions truly occur
  • Windsurf previews help identify wasted fetch waterfalls

💡 Light JavaScript by Default

  • Validate that hydration is reserved for interactive components
  • Windsurf reveals unnecessary client transitions
  • When the page renders fine without JS — keep it that way
  • Minimal JS is a performance strategy

🎯 Feature-Based Folder Structure

  • Group routes, components, and tests around user intent and feature ownership
  • Keep stray utilities from polluting page context
  • Visualize file impact before moving or renaming

👁️ Clear Observability Across the Stack

  • Trace UI behavior back to server boundaries visually
  • Track rendering cost: server → hydration → client
  • Ensure logs and error boundaries match navigation intents

🧠 Windsurf as Full-Stack Reviewer

  • Highlight structural drift early
  • Help new contributors onboard via visual diagrams
  • Summarize architectural choices across environments
  • Architecture is easier to understand when you can see it

🔑 Next.js + Windsurf Principles

  • Server first — the browser should do only what it must
  • Route organization teaches users how to explore
  • Hydrate intentionally — never by accident
  • Visualizing boundaries keeps systems honest
View Tool Page