React Nextjs Patterns
Published by duyet in codex-claude-plugins
No known issues1.1k installs
What this skill does
Conventions for React and Next.js App Router code. Use when building or reviewing components, pages, data fetching, caching, or Server Actions in a Next.js app.
Add React Nextjs Patterns to your agent
Review the source and files first. When you are ready, copy the prompt instruction or use the CLI command supported by your environment.
Install with a prompt
Paste this into a compatible coding agent:
add this skill "react-nextjs-patterns" from https://github.com/duyet/codex-claude-pluginsInstall with the CLI
Run this command in a controlled environment after reviewing the repository:
npx skills add https://github.com/duyet/codex-claude-plugins --skill react-nextjs-patternsSkill instructions
React and Next.js patterns
Check the installed versions in package.json and read the matching docs (https://nextjs.org/docs) before using caching or routing APIs. Defaults changed across majors.
- Server components by default. Put
"use client"on the smallest leaf that needs it, never on a page or layout. - Fetch in server components. Start independent requests together. Stream slow sections with Suspense.
- Per-user data must never reach a shared cache.
- Treat every Server Action as a public endpoint: authenticate, authorize, and validate input inside it.
- Server-only modules import
server-only. Only serializable props cross the client boundary. - Derive values during render. An effect that only sets state from state should be deleted.
- No
useMemo,useCallback, ormemowithout a measured problem, and none with the React Compiler. - Stable list keys from data ids. Use
next/image,next/font, andnext/link.
Files included
- SKILL.md