React Nextjs Patterns
This is a solid reference for making smart architectural decisions in React and Next.js projects. It covers the fundamentals that actually matter: when to use server versus client components, how to structure data fetching so it doesn't cascade into waterfalls, and proper memoization strategies that don't just wrap everything in memo because you heard you should. The examples are practical, like showing how to push state down the component tree to avoid unnecessary rerenders, or using Suspense boundaries to stream slow data without blocking fast data. If you're building Next.js apps with the App Router or debugging performance issues in React, this gives you working patterns without the blog post fluff.
- skills.sh installs
- 231
- GitHub stars
- 4
- last updated
- Jun 3, 2026
Install
$ npx -y skills add duyet/claude-plugins --skill react-nextjs-patterns --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/duyet/claude-plugins
- Category
- Frontend Development
- First seen
- Jun 3, 2026
Recommended
More Frontend Development
vue-jsx-best-practicesvuejs-ai/skillsJSX syntax in Vue (e.g., class vs className, JSX plugin config).11.9Kskills.sh installs
ui-to-vueaffaan-m/eccUse when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue.5.4Kskills.sh installs
tailwind-csspaulrberg/agent-skillsUse for Tailwind v4 styling: add/fix classes, configure or migrate Tailwind, use tailwind-variants, or tw-animate-css.3Kskills.sh installs