agentleFS
LeahyCCLeahyCC/claude-skills/skills/nextjs-app-router/SKILL.md

nextjs-app-router

Skill3 starsChanged 8 months agoMITView on GitHub

Build, review, or migrate Next.js App Router applications with version-aware component boundaries, data fetching, caching, routing, and mutations. Use for App Router implementation and architecture tasks, not generic React optimization, copy-only edits, or Pages Router fixes that do not involve migration.

13 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use skill-creator.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • SentrySkill

    skill-creator

    Create new agent skills following the Agent Skills specification. Use when asked to "create a skill", "add a new skill", "write a skill", "make a skill", "build a skill", or scaffold a new skill with SKILL.md. Guides through requirements, writing, registration, and verification.

    Also in 3 projects that use this

The file

We split this skill into the rules it gives an agent

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

  • 0

    Common

    Most of the 11 edited versions we read keep these.

  • 2

    Distinctive

    This author's own choices. Worth a look.

  • 2

    Very specific

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

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Prefer version-matched docs bundled at node_modules/next/dist/docs/ on Next.js 16.2+, when available.

    line 14
  2. Distinctive:

    Read only the resources needed for the task.

    line 18
  3. Distinctive:

    Remove demonstrated waterfalls and unnecessary client code.

    line 37
  4. Very specific:

    Use Server Components for server-only work.

    line 40

“Common” is measured: kept by at least 6 in 10 of the 11 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 App Router

Preserve the app's supported version and configuration. Prefer server rendering and direct server reads where they fit; keep interactive and live browser behavior where needed.

Establish the context

Inspect package.json, lockfile, route folders, next.config.*, and project instructions. Identify the installed Next.js/React versions, App vs Pages Router, runtime/deployment constraints, and whether Cache Components is enabled. In monorepos resolve these from the affected app. Do not upgrade packages or enable features merely to fit an example.

Prefer version-matched docs bundled at node_modules/next/dist/docs/ on Next.js 16.2+, when available. Otherwise consult official docs for the supported version. The live docs can describe a newer minor; confirm API version history and config before use. Distinguish stable APIs, experimental options, deprecations and project conventions.

Choose the relevant resource

Read only the resources needed for the task; follow their official links when a version or behavior is uncertain.

TaskResource
Server/client boundaries, composition, serializationServer Components
Reads, streaming, browser data, actions, HTTP endpointsData fetching
Existing cache mode, Cache Components, private/remote cache, invalidationCaching
Layouts, dynamic routes, search, parallel/intercepting routesRouting
Request redirects/rewrites and optimistic auth gatesProxy
Expected errors, loading, recovery, 404 response semanticsError handling
Metadata exports, inheritance and SEO integrationMetadata
Image/font configuration and loading tradeoffsAssets
Incremental Pages to App migrationMigration
Deliberate major/minor upgradesVersion changes

Prioritize decisions

  1. Protect secrets and user data. Authenticate and authorize reads/mutations near the data, validate untrusted input, and keep personal data out of an incorrectly shared cache. Proxy and UI visibility are insufficient authorization.
  2. Preserve correctness across versions and rendering modes. Async request APIs, cache prerequisites, route conventions and recovery props depend on the installed version/config.
  3. Remove demonstrated waterfalls and unnecessary client code. Parallelize independent work; choose Suspense boundaries that preserve useful UI. Client fetching remains appropriate for polling, browser-only state and interactive updates.
  4. Tune caching, prefetch and asset hints to freshness, deployment and measured behavior. These are choices, not prerequisites for every App Router app.

Use Server Components for server-only work. Add 'use client' at a useful module boundary for interaction; it need not be a leaf. Use a Server Action for UI mutations when appropriate, or a Route Handler for an HTTP contract (including browser clients). Neither replaces authorization.

Validate the actual change

Run the affected app's existing typecheck, lint and build commands when available. Test the behavior that can fail: authenticated direct requests, cross-user isolation, post-mutation freshness, hard/soft navigation, errors, and loading. Do not call a snippet production-ready when imports, auth helpers or persistence are placeholders. State what ran and what remains untested.

For reviews, lead with actionable failures and their version/config scope. Separate optional improvements from correctness issues. For implementation, explain the chosen boundary/cache mode, changed behavior and verification.

Source review is scoped, not a blanket certification. See SOURCES.md for canonical links, applicable versions/configurations, checked sections, upstream dates and the freshness policy. The repository's pilot review/evaluation records are maintenance evidence and are not required at runtime.

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.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

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.