id	FORGE-nextjs-mastery
name	FORGE-nextjs-mastery
version	1.0.0-2026.07.17
description	Next.js App Router engineering — server components, streaming, and edge patterns.
owner	A-FORGE
risk_tier	medium
floor_scope	["F1","F4","F12"]
autonomy_tier	T1

⚒️ Next.js Mastery — App Router Engineering

DITEMPA BUKAN DIBERI — Forged, Not Given.

Purpose

Build and maintain Next.js SPA surfaces with App Router discipline: server components first, ISR for content, API routes for organ bridges, strict client/server boundary.

When to Use

Scaffolding or modifying a Next.js app in the federation (cockpit, organ surfaces)
Routing decisions — parallel/intercepting routes, group layouts, loading/error boundaries
Data fetching strategy — server component fetch vs SWR vs ISR
API route design for organ proxying (/api/observatory/v1/*)

When NOT to Use

Plain React without Next.js router — use react-spa-discipline
Static site generation outside Vercel/Node — use Vite/build tool skill
Backend logic that belongs in FastAPI or Express organ servers

Constitutional Floor Alignment

Floor	Application
F1 AMANAH	Keep page/route changes reversible; git stash before layout refactors
F2 TRUTH	`generateStaticParams` must match actual data; never fake revalidate values
F4 CLARITY	One data-fetching pattern per route group; no mixing server/client fetch
F7 HUMILITY	Default to `loading.tsx` + `error.tsx` on every route segment
F11 AUDIT	API routes log request origin; ISR revalidation events write to VAULT999
F13 SOVEREIGN	Public-facing routes reviewed by Arif before deploy

Commands & Patterns

# Create a new route segment under app router
# /root/AAA/src/app/<segment>/page.tsx (server component by default)
# /root/AAA/src/app/<segment>/loading.tsx
# /root/AAA/src/app/<segment>/error.tsx

# ISR pattern — revalidate every 60s, on-demand revalidation endpoint
export const revalidate = 60;
// POST /api/revalidate?secret=<token>&path=<path>

# API route pattern — proxy to organ
export async function GET(req: NextRequest) {
  const res = await fetch(`http://localhost:8088/mcp`, { ... });
  return NextResponse.json(await res.json());
}

# Server component fetch — direct, no hooks
async function Page() {
  const data = await fetch('http://localhost:8088/health').then(r => r.json());
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Refusal Surface

❌ Client-side data fetching when server component can do it
❌ useEffect for API calls that belong in generateStaticParams or RSC
❌ Mixing Pages Router and App Router in the same surface
❌ Hardcoding organ ports in client components — use env proxy
❌ Skipping error/loading boundaries on user-facing routes

Más de este repositorio

mismo repositorio

federation-release-attestation

ariffazil/AAA

Produces a seven-repository federation release manifest proving tag, commit, CI, artifact, and deployed-runtime parity. Never overwrites existing tags — issues corrected tags when drift is detected. Outputs signed JSON manifest with per-repo evidence chain.

2026-07-172

forge-pr-governance

ariffazil/AAA

High-level governance layer for pull request review across the federation. Ensures separation of duties, required signers, and constitutional compliance before merge. This is the **policy layer** that decides who must approve. The **checklist** lives in `github-pr-review`; do not duplicate it here.

2026-07-172

forge-repo-intelligence

ariffazil/AAA

Controller skill for repository intelligence across the arifOS Federation. Exposes 9 modes (inventory, map, delta, pr_review, ci_diagnose, issue_triage, security, cross_repo_impact, release_audit) and orchestrates existing GitHub micro-skills rather than duplicating their logic. Every mode outputs a minimum evidence envelope with repo, ref, commit_sha, working_tree, tag_delta, changed_files, critical_paths, tests, ci, security, contract_impacts, runtime_probe, risk_tier, proposed_action, rollback, evidence_class, and unknowns.

2026-07-172

asi-session-seal

ariffazil/AAA

End-of-session seal ritual for Grok/AAA agents: inventory done vs open, write forge_work receipt, update session-state and daily memory, hand off next-agent INIT prompt. Use when: seal session, end of turn, session seal, handoff, close session, DITEMPA seal.

2026-07-172

forge-sct-federation-ingress

ariffazil/AAA

Wire, verify, and operate federation Session Capability Tokens (SCT) across arifOS mint/validate and organ ingress gates (A-FORGE, GEOX, WEALTH, WELL, AAA). Use when: SCT gate, session_token, federation_sct, SCT_AMBIGUOUS, tool_authority, FORGE_SCT_REQUIRE_MUTATE, 65-case matrix, decision event.

2026-07-172

forge-seal-a-close

ariffazil/AAA

Close remaining Seal-A gates after P0 proof/identity/SCT/T3a work. Use when: Seal-A, stage 000, SE stage engine, SOT v2, BOOT, T3a binding, free_nonce, constitutional_grade, remaining seal tasks.

2026-07-172

⚒️ Next.js Mastery — App Router Engineering

DITEMPA BUKAN DIBERI — Forged, Not Given.

Purpose

Build and maintain Next.js SPA surfaces with App Router discipline: server components first, ISR for content, API routes for organ bridges, strict client/server boundary.

When to Use

Scaffolding or modifying a Next.js app in the federation (cockpit, organ surfaces)

Routing decisions — parallel/intercepting routes, group layouts, loading/error boundaries

Data fetching strategy — server component fetch vs SWR vs ISR

API route design for organ proxying (/api/observatory/v1/*)

When NOT to Use

Plain React without Next.js router — use react-spa-discipline

Static site generation outside Vercel/Node — use Vite/build tool skill

Backend logic that belongs in FastAPI or Express organ servers

Constitutional Floor Alignment

Floor

Application

F1 AMANAH

Keep page/route changes reversible; git stash before layout refactors

F2 TRUTH

generateStaticParams must match actual data; never fake revalidate values

F4 CLARITY

One data-fetching pattern per route group; no mixing server/client fetch

F7 HUMILITY

Default to loading.tsx + error.tsx on every route segment

F11 AUDIT

API routes log request origin; ISR revalidation events write to VAULT999

F13 SOVEREIGN

Public-facing routes reviewed by Arif before deploy

Commands & Patterns

# Create a new route segment under app router # /root/AAA/src/app/<segment>/page.tsx (server component by default) # /root/AAA/src/app/<segment>/loading.tsx # /root/AAA/src/app/<segment>/error.tsx # ISR pattern — revalidate every 60s, on-demand revalidation endpoint export const revalidate = 60; // POST /api/revalidate?secret=<token>&path=<path> # API route pattern — proxy to organ export async function GET(req: NextRequest) { const res = await fetch(`http://localhost:8088/mcp`, { ... }); return NextResponse.json(await res.json()); } # Server component fetch — direct, no hooks async function Page() { const data = await fetch('http://localhost:8088/health').then(r => r.json()); return <pre>{JSON.stringify(data, null, 2)}</pre>; }

Refusal Surface

❌ Client-side data fetching when server component can do it

❌ useEffect for API calls that belong in generateStaticParams or RSC

❌ Mixing Pages Router and App Router in the same surface

❌ Hardcoding organ ports in client components — use env proxy

❌ Skipping error/loading boundaries on user-facing routes