Agent skill · software engineering · aiskillstore
next-best-practices
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
Why this skill is useful
Provides domain-specific knowledge on Next.js best practices, including file conventions, async patterns, and error handling that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Next.js Best Practices Apply these rules when writing or reviewing Next.js code. File Conventions See file-conventions.md for: Project structure and special files Route segments (dynamic, catch-all, groups) Parallel and intercepting routes Middleware rename in v16 (middleware → proxy) RSC Boundaries Detect invalid React Server Component patterns. See rsc-boundaries.md for: Async client component detection (invalid) Non-serializable props detection Server Action exceptions Async Patterns Next.js 15+ async API changes. See async-patterns.md for: Async params and searchParams Async cookies() and headers() Migration codemod Runtime Selection See runtime-selection.md for: Default to Node.js runtime When Edge runtime is appropriate Directives See directives.md for: 'use client', 'use server' (React) 'use cache' (Next.js) Functions See functions.md for: Navigation hooks: useRouter, usePathname, useSearchParams, useParams Server functions: cookies, headers, draftMode, after Generate functions: generateStaticParams, generateMetadata Error Handling See error-handling.md for: error.tsx, global-error.tsx, not-found.tsx redirect, permanentRedirect, notFound forbidden, unauthorized (auth errors) unstablerethrow for catch blocks Data Patterns See data-patterns.md for: Server Components vs Server Actions vs Route Handlers Avoiding data waterfalls (Promise.all, Suspense, preload) Client component data fetching Route Handlers See route-handlers.md for: route.ts basics GET handler conflicts with page.tsx Environment behavior (no React DOM) When to use vs Server Actions Metadata & OG Images See metadata.md for: Static and dynamic metadata generateMetadata function OG image generation with next/og File-based metadata conventions Image Optimization See image.md for: Always use next/image over <img> Remote images configuration Responsive sizes attribute Blur placeholders Priority loading for LCP Font Optimization See font.md for: next/font setup Google Fonts, local fonts Tailwind CSS inte …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/next-best-practices