Next.js App Router

Pathrule2 Rules • 2 Memories • 1 Skill

Rules, memories, and a review skill for teams building on the Next.js App Router. Each piece is pre-scoped so your AI assistant applies it only where it is relevant: server and client boundaries, caching, and secret safety in the app directory, plus a route review checklist at the root.

Suggested path map

Pathrule places each piece on the matching path, so your assistant only sees it where it belongs. This is the scoping you get on import; you can adjust it in your workspace.

/ workspace root

nextjs-route-review

app/

Server Components by default

Never leak server secrets to the client

Route segment config conventions

Data fetching and caching policy

Rules

Server Components by default/apphighadvisoryAdd 'use client' only when a component truly needs interactivity.

1	Components under the `app` directory are Server Components by default.
2
3	- Add `'use client'` only for components that use state, effects, refs, or browser APIs.
4	- Fetch data in Server Components and pass plain, serializable props down.
5	- Push the client boundary as far down the tree as possible so most of the page stays server-rendered.

Never leak server secrets to the client/apphighstrictServer-only env and modules must not be imported by client components.

1	Only `NEXT_PUBLIC_` variables may reach the client bundle.
2
3	- Never import a server-only module, database client, or secret-bearing config from a `'use client'` file.
4	- Use the `server-only` package so the build fails if a server module is imported client-side.
5	- Keep API keys and tokens in Server Components, Route Handlers, or Server Actions.

Memories

Route segment config conventions/appWhere we set revalidate, dynamic, and runtime, and why.

1	Caching is set at the segment level, not scattered per fetch.
2
3	- Use `export const revalidate` when the whole segment shares a freshness need.
4	- Default runtime is `nodejs`.
5	- Any `export const dynamic = 'force-dynamic'` carries a one-line comment explaining why the segment cannot be cached.
6	- Prefer fetch-level cache options for mixed-freshness pages.

Data fetching and caching policy/appFetch on the server, cache deliberately, revalidate by tag.

1	Fetch on the server, cache deliberately, revalidate by tag.
2
3	- Fetch in Server Components or Route Handlers, never in client effects.
4	- Set explicit `cache` and `next.revalidate` options on `fetch`.
5	- Use `revalidateTag` for targeted invalidation after mutations.
6	- Start independent requests in parallel to avoid waterfalls.

Skills

nextjs-route-review/rootChecklist for reviewing a new App Router route.

1	---
2	name: nextjs-route-review
3	description: Review a new Next.js App Router route for correctness, caching, and safety.
4	---
5
6	# Next.js route review
7
8	Run this before merging a new route or layout.
9
10	- [ ] Server vs client boundary is minimal and correct ('use client' only where needed)
11	- [ ] No server-only module or secret is reachable from a client component
12	- [ ] Caching and revalidate are intentional and documented
13	- [ ] loading.tsx and error.tsx exist where the route fetches data
14	- [ ] generateMetadata or static metadata is exported for SEO
15	- [ ] Dynamic params are validated and not trusted blindly
16	- [ ] Mutations use Server Actions or Route Handlers, and revalidate the right tags

Why this pattern

App Router teams keep relitigating the same server/client and caching decisions, and AI assistants guess them differently every time.

Built for teams building product UI and routes on the Next.js App Router.

Keeps your assistant from:

Marking everything 'use client' and shipping a mostly-client app
Leaking server-only env or modules into the client bundle
Uncached dynamic rendering with no documented reason

View as markdown

License: Apache-2.0
Version: 1.0.0
Updated: 2026-06-09