next-best-practices
Next.js Best Practices
Modern Next.js (v16+) with App Router, React Server Components, and Cache Components. This skill ensures you use current APIs instead of deprecated patterns like unstable_cache, getServerSideProps, or useFormState.
Critical Modern Patterns
These patterns differentiate production-quality Next.js code from outdated approaches. Prioritize them in every implementation:
| Pattern | What | Why it matters |
|---|---|---|
'use cache' directive |
Cache any async computation (not just fetch) |
Replaces unstable_cache. Enables PPR. |
useActionState |
Form pending states + error handling | Replaces useFormState. React 19 standard. |
useOptimistic |
Instant UI updates before server responds | Critical for perceived performance. |
updateTag |
Immediate cache expiration in Server Actions | Read-your-own-writes. Use instead of revalidateTag after mutations the user should see immediately. |
import 'server-only' |
Prevent accidental client import of server code | Protects secrets, reduces bundle. Always use on DB/auth modules. |
| Async request APIs | params, searchParams, cookies(), headers() are all Promise in Next.js 15+ |
Must await in server components, use() in client components. |
| Proxy (formerly Middleware) | middleware.ts renamed: export proxy() function instead of middleware() |
Next.js 16 rename. Same functionality, new name. |
Core References
More from biggora/claude-plugins-registry
captcha
>
32tailwindcss-best-practices
Tailwind CSS v4.x utility-first CSS framework best practices. Use when styling web applications with utility classes, building responsive layouts, customizing design systems with @theme variables, migrating from v3 to v4, configuring dark mode, creating custom utilities with @utility, or working with any Tailwind CSS v4 features. This skill covers the full v4.x line through v4.2 including text shadows, masks, logical properties, and source detection. Use this skill even for simple Tailwind questions — v4 changed many class names and configuration patterns that trip people up.
21test-web-ui
>
19vite-best-practices
Vite build tool configuration, plugin API, SSR, library mode, and Vite 8 Rolldown/Oxc migration. Use when working with Vite projects, vite.config.ts, Vite plugins, building libraries or SSR apps with Vite, migrating from older Vite versions, or configuring Rolldown/Oxc options. Also use when the user mentions HMR, import.meta.glob, virtual modules, or Vite environment variables.
14gemini-cli
>
12typescript-expert
TypeScript language expertise covering the type system, generics, utility types, advanced type patterns, and project configuration. Use this skill whenever writing, reviewing, or refactoring TypeScript code, designing type-safe APIs, working with complex generics, debugging type errors, configuring tsconfig.json, migrating JavaScript to TypeScript, or leveraging TypeScript 5.x features like satisfies, const type parameters, decorators, and the using keyword. Also use when the user asks about type narrowing, conditional types, mapped types, template literal types, branded types, discriminated unions, or any TypeScript type system question — even seemingly simple ones, because TypeScript's type system has subtle gotchas that catch experienced developers.
12