What belongs in ARCHITECTURE.md?

How the main modules relate, how state and data flow, and the boundaries every change must keep.

How does ARCHITECTURE.md help AI agents?

It tells them where code belongs and which boundaries to keep, so they are less likely to add circular dependencies or skip layers. Point to it from CLAUDE.md or AGENTS.md so they read it.

# System Architecture & Invariants: Next.js 16 App Router & Server Actions Specialist

## 1. System Overview

Production guidelines for Next.js App Router. Enforces React Server Components (RSC) by default, Server Actions for mutations with Zod validation, and Tailwind CSS v4 styling.

All AI agents operating within this repository must adhere strictly to these architectural boundaries.

### Technology Stack

- **Framework**: Next.js 16 (App Router)

- **Language Standard**: TypeScript

- **UI & Styling**: Tailwind CSS v4

- **Data Persistence**: PostgreSQL / Prisma / Drizzle

- **Engineering Philosophy**: pragmatic

## 2. Core Architectural Invariants

- **Server Components (RSC) First**: Default to React Server Components; keep client components confined to leaves.

- **Feature-Colocated Structure**: Group components, hooks, tests, and utils inside domain feature folders.

- **Guard Clauses & Early Returns**: Exit early from functions to eliminate deeply nested if-else pyramids.

- **Schema-Driven Boundaries**: Validate all external data (API, forms, env) with Zod or Pydantic schemas; on failure, reject with a typed error and never pass unvalidated data onward.

- **Accessible UI by Default**: Enforce semantic HTML, keyboard navigability, and proper ARIA roles.

## 3. Data Flow & State Management Principles

1. **Unidirectional Data Flow**: State flows top-down; mutations flow through explicit, typed handlers.

2. **Boundary Validation**: External inputs (API payloads, query parameters, environment variables) must be parsed with strict schemas before reaching domain logic.

3. **Surgical Precision**: Diffs must remain minimal and scoped exclusively to the objective. Do not reformat unrelated code.

## 4. Forbidden Anti-Patterns & Operational Guardrails

- **Inspect Before Acting**: Always read and understand existing code and imports before suggesting changes.

- **Minimal Surgical Diffs**: Touch only lines relevant to prompt. Preserve existing comments and formatting.

- **Concise & Direct Tone**: Skip conversational pleasantries. Deliver focused diffs and a short rationale.

- **Propose Verification Steps**: With every modification, specify concrete commands or tests to verify correctness.

- **Preserve Codebase Idioms**: Match existing naming conventions, indentation, and directory patterns.

## 5. Domain-Specific Invariants

- Banned: Do not use pages/ router conventions or old getServerSideProps.

- Request interception lives in proxy.ts (export function proxy); middleware.ts is deprecated.

- Keep client bundles minimal; never import server libraries into client components.

- Use Next/Image for optimized media with explicit width/height or fill.

## 6. Implementation Reference Patterns

### Preferred Pattern

```typescript

// Good: Server Action with Zod validation and safe error return

"use server";

import { z } from "zod";

import { db } from "@/lib/db";

const Schema = z.object({ email: z.string().email(), name: z.string().min(2) });

export async function createUserAction(formData: FormData) {

const parsed = Schema.safeParse(Object.fromEntries(formData));

if (!parsed.success) return { ok: false, errors: parsed.error.flatten().fieldErrors };

await db.user.create({ data: parsed.data });

return { ok: true };

}

```

### Forbidden Anti-Pattern

```typescript

// Discouraged: Unvalidated client-side mutation with inline API call

"use client";

export function SubmitUser() {

const submit = async (data: any) => {

await fetch("/api/users", { method: "POST", body: JSON.stringify(data) });

};

return <button onClick={submit}>Save</button>;

}

```

## 7. Verification Protocol

Before finalizing any implementation:

1. Fetch data directly in React Server Components; never introduce 'use client' for purely read-only views.

2. Isolate client interactivity to leaf components (buttons, dropdowns, forms) with strict props interfaces.

3. Encapsulate data mutations inside Server Actions, validating input with Zod schemas before running database queries.

4. Await request APIs: params and searchParams props, cookies(), headers() and draftMode() are async in Next.js 16 and have no sync form.

5. Caching is opt-in: mark cached functions and components with "use cache" (cacheComponents: true). After a mutation call updateTag(tag) in the Server Action, or revalidateTag(tag, "max") for stale-while-revalidate.

6. Manage transient UI state with React 19 hooks (useActionState, useOptimistic) and searchParams for URL sync.

7. Provide dedicated loading.tsx skeletons and error.tsx error boundaries for all dynamic route segments.

Frontend · Any coding agent

Next.js 16 App Router ARCHITECTURE.md

An ARCHITECTURE.md for Next.js 16 App Router: module responsibilities, data flow and the boundaries code changes must keep.

Path: ARCHITECTURE.md
Loads: Read when referenced
Format: Markdown (.md)
Used by: Any coding agent

All ARCHITECTURE.md presets and how ARCHITECTURE.md works

What this file tells the agent

ARCHITECTURE.md describes module responsibilities, state boundaries and data flow, so a coding agent knows where code belongs before it changes anything. Point to it from CLAUDE.md or AGENTS.md so agents read it.

Enforce React Server Components (RSC) by default; restrict 'use client' strictly to interactive leaf components.
Mutate state exclusively via Server Actions with Zod safeParse validation.
Await the async request APIs (cookies(), headers(), params, searchParams); Next.js 16 removed the sync forms.
Avoid pages/ directory conventions or legacy getServerSideProps.
Colocate loading.tsx and error.tsx for dynamic route segments.

Code to avoid, and what to write instead

The rule steers the agent away from the left and toward the right.

avoid

"use client";
export function SaveItem() {
  const submit = async (e: any) => {
    e.preventDefault();
    await fetch("/api/items", { method: "POST", body: JSON.stringify({ title: "Test" }) });
  };
  return <button onClick={submit}>Save</button>;
}

write instead

"use server";
import { z } from "zod";
import { db } from "@/lib/db";

const Schema = z.object({ title: z.string().min(3) });

export async function createItem(formData: FormData) {
  const parsed = Schema.safeParse(Object.fromEntries(formData));
  if (!parsed.success) return { ok: false, errors: parsed.error.flatten().fieldErrors };
  await db.item.create({ data: parsed.data });
  return { ok: true };
}

Install it in one command

01
Go to your project root
The file goes at ARCHITECTURE.md, relative to the root.
02
Download the file
Run the command on the right. It downloads this preset and writes the file.
03
Make sure it gets used
Agents read it when your CLAUDE.md or AGENTS.md points to it. Add a line such as "Read ARCHITECTURE.md before structural changes".

$ curl -fsSL "https://www.devscratchpad.tech/api/raw/architecture-md/nextjs-16" -o "ARCHITECTURE.md"

writes ARCHITECTURE.md

path

ARCHITECTURE.md

To write the file from your own code instead, use Read your code or Convert Legacy Rules in the editor above.

More for Next.js 16 App Router

Other formats

Other ARCHITECTURE.md presets

Questions

What belongs in ARCHITECTURE.md?: How the main modules relate, how state and data flow, and the boundaries every change must keep.
How does ARCHITECTURE.md help AI agents?: It tells them where code belongs and which boundaries to keep, so they are less likely to add circular dependencies or skip layers. Point to it from CLAUDE.md or AGENTS.md so they read it.

Target Standard & File Format

Identity & Activation Rules

Technology Stack Context

Engineering Philosophy

Architectural & Code Quality Conventions

Agent Behavioral Guardrails

Step-by-Step Workflow Procedures

Target File Location