skills.rest
daniellelooo
danielleloooCOMMUNITY
Explore all skills by this author →
GitHub

next-best-practices

Enforce Next.js best practices for file conventions and React Server Components.

Updated Mar 10, 2026
Search Tags:#code quality#best practices#next.js#performance optimization#app router#react server components
One-click install
npx skills add https://github.com/daniellelooo/velour --skill next-best-practices-daniellelooo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/daniellelooo/velour/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/daniellelooo/velour --skill next-best-practices-daniellelooo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and rules to ensure Next.js code adheres to best practices, improving maintainability, performance, and developer experience.

Core Features & Use Cases

  • File Conventions: Understand project structure, route segments, and special files.
  • RSC Boundaries: Detect and prevent invalid React Server Component patterns and non-serializable props.
  • Data Patterns: Choose the right pattern for fetching and mutating data (Server Components, Server Actions, Route Handlers).
  • Error Handling: Implement robust error handling with error.tsx, global-error.tsx, and navigation API best practices.
  • Optimization: Learn about image, font, and bundling optimizations.
  • Use Case: A developer can use this Skill to review their Next.js codebase, ensuring it follows established patterns for routing, data fetching, and component architecture, leading to a more stable and performant application.

Quick Start

Review the current project's Next.js code against the best practices outlined in the file conventions section.

Frequently Asked Questions about next-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices for React Server Component boundaries in Next.js?▼

Next.js data fetching best practices involve choosing the right pattern among Server Components, Server Actions, and Route Handlers. Selecting the correct method ensures optimal performance for data fetching and mutating operations within your App Router application.

How do I implement error handling in Next.js App Router?▼

Next.js file conventions for App Router dictate project structure through route segments and special files. Following these conventions establishes a maintainable architecture and ensures proper routing behavior across your application.

What is the best way to optimize images and fonts in Next.js?▼

Optimizing images and fonts in Next.js involves leveraging built-in optimization features and bundling configurations. Applying these performance optimization techniques reduces load times and improves overall application metrics.

How do I choose between Server Actions and Route Handlers for data mutation?▼

Choosing between Server Actions and Route Handlers depends on your specific data mutation requirements in Next.js. Evaluating these data patterns against your use case ensures you select the most appropriate server-side execution method.

Related Skills

Explore More Software Engineering Skills→
mub7865mub7865
1

nextjs-16-app-router-structure

Implement a standardized Next.js 16 App Router project structure.

Community
Intermediate
ag47-ptag47-pt
1

performance-profiling

Profile web applications to identify performance bottlenecks and optimization opportunities.

Community
Intermediate
arvindbattulaarvindbattula

react-engineering

Enforce React component architecture, state boundaries, and UI code standards.

Community
Advanced
The-InterdependencyThe-Interdependency
1

vercel-react-best-practices

Refactor React/Next.js code for performance using Vercel best practices.

Official
Advanced