Agent skill · software engineering · laguagu
next-best-practices
Next.js App Router best practices covering file conventions, RSC boundaries, async APIs, data patterns, hydration errors, metadata, route handlers, image/font optimization, and bundling. Use when writing or reviewing Next.js code to prevent hydration errors, RSC violations, data waterfalls, and configuration mistakes.
Why this skill is useful
Provides specific patterns and conventions for Next.js that the AI wouldn't reliably generate on its own, especially regarding hydration errors and RSC boundaries.
What it needs
About 2k tokens when loaded. Last updated 2026-08-03. 58 stars on the source repository.
What this skill does
Next.js Best Practices Apply these rules when writing or reviewing Next.js code. Cache Components patterns: When the project has cacheComponents: true in next.config.ts, use the separate cache-components skill for 'use cache', cacheLife(), cacheTag(), updateTag(), and revalidateTag() guidance. 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 …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills laguagu/next-best-practices