Frontend 5,962 installs

Next.js Best Practices

by vercel-labs/next-skills

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization,…

Skill content

Comprehensive Next.js development guidelines covering file structure, RSC patterns, data fetching, optimization, and error handling.

- Covers 15+ topic areas including file conventions, route segments, RSC boundaries, async patterns, metadata generation, and image/font optimization

- Provides runtime selection guidance, directive usage, and error handling strategies with specific file conventions like error.tsx and not-found.tsx

- Includes data fetching patterns, route handler best practices, bundling considerations, and hydration error debugging

- Addresses advanced patterns such as parallel routes, intercepting routes, Suspense boundaries, and self-hosting with Docker

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.