AI Agent Rules for Next.js App Router
App Router changed everything. Your AI agent's training data is mostly Pages Router. Here's how to bridge that gap.
The App Router knowledge gap
Next.js App Router (stable since Next.js 13.4) is still underrepresented in AI training data compared to Pages Router. AI agents -even well-trained ones -will revert to Pages Router patterns unless you explicitly tell them not to. This includes using getServerSideProps (which doesn't exist in App Router), putting components in pages/, and adding "use client" to everything.
Server Components -the most important rule
The default in App Router is Server Components. "use client" is opt-in. Most AI agents flip this -they add "use client" to everything because it's the safe choice when they're unsure. Your rules file should make the boundary explicit: "use client" only for event handlers, browser APIs, and React hooks that require client state.
App Router AI rules template
This covers the full App Router mental model for your rules file.
# Next.js App Router Rules
## Server vs Client Components
- Server Components are the DEFAULT. Do not add "use client" unless required.
- Add "use client" ONLY for: event handlers (onClick etc.), browser APIs (window, localStorage), useState, useEffect, useRef, and other client-only hooks.
- Data fetching happens in Server Components using async/await with fetch() or ORM calls directly.
- Never use useEffect to fetch data.
## Routing
- Routes live in src/app/. File structure IS the URL structure.
- page.tsx = the route UI. layout.tsx = shared shell. loading.tsx = Suspense fallback. error.tsx = error boundary.
- Route groups with (parentheses) create layout boundaries without URL segments: (marketing), (dashboard), (auth).
- Private folders with _underscore are NOT routes: src/app/[route]/_components/ for route-local components.
## Data Fetching
- Async Server Components: async function Page() { const data = await fetchData(); return <UI data={data} /> }
- Use React Suspense boundaries for loading states.
- Server Actions for mutations: "use server" directive, called from Client Components or forms.
- Never use getServerSideProps, getStaticProps, or getStaticPaths -these are Pages Router only.
## File Placement
- app/ = routes only. Business logic goes in features/.
- lib/ = server-only utilities. Must import 'server-only' at top of file.
- Never import a lib/ file from a Client Component -it will break the build.
## TypeScript
- Page component props: type PageProps = { params: Promise<{ slug: string }> }
- Use Zod for all incoming data validation (API routes, Server Actions).