agentleFS
Sign inStart free
jahongashtamcjahongashtamc/hallwright/.agents/skills/next-best-practices/SKILL.md

next-best-practices

Skill1 starsChanged 13 days agoMITView on GitHub

Author, optimize, and review Next.js applications (App Router, React Server Components, Server Actions, Partial Prerendering, and caching). Enforces sub-second TTFB, zero hydration mismatches, and pristine component boundaries.

We split this skill into the rules it gives an agent

4 rules. 0 are common, 4 are distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 47 edited versions we read keep these.

  • 4

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Server by Default: Keep components as React Server Components (RSC) unless interactivity (useState, useEffect, event listeners) or browser …

    line 14
  2. Distinctive:

    Avoid passing sensitive environment variables or un-sanitized server contexts into Client Component props.

    line 20
  3. Distinctive:

    Always validate inputs in Server Actions using Zod or typed schemas before executing database mutations.

    line 23
  4. Distinctive:

    Never render non-deterministic content (random numbers, current time, localStorage state) on the initial SSR render to prevent hydration …

    line 28

“Common” is measured: kept by at least 6 in 10 of the 47 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Next.js Production Best Practices (Vercel Engineering Standards)

Comprehensive guidelines for modern Next.js 14/15+ App Router architectures.

1. Component Boundaries & RSC Directives

  • Server by Default: Keep components as React Server Components (RSC) unless interactivity (useState, useEffect, event listeners) or browser APIs are required.
  • Client Leaf Pattern: Push 'use client' to the farthest leaf components in the tree to maximize streaming and server rendering.
  • Data Flow: Fetch data directly inside Server Components using async/await. Pass serialized data down to Client Components as props.

2. Dynamic APIs & Route Handlers

  • In Next.js 15, cookies(), headers(), and route params are asynchronous promises. Always await them.
  • Avoid passing sensitive environment variables or un-sanitized server contexts into Client Component props.

3. Server Actions & Mutations

  • Always validate inputs in Server Actions using Zod or typed schemas before executing database mutations.
  • Revalidate paths precisely with revalidatePath or revalidateTag to update cache without reloading the whole layout.
  • Wrap mutations with useTransition / useActionState on the client for optimistic UI updates.

4. Hydration & Performance

  • Never render non-deterministic content (random numbers, current time, localStorage state) on the initial SSR render to prevent hydration mismatch errors.
  • Wrap dynamic subtrees with <Suspense fallback={<Skeleton />}> to enable immediate streaming responses and progressive page hydration.
  • Optimize assets using next/image with explicit aspect ratios and next/font for zero layout shift (CLS: 0).

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free