next-best-practices

Guide Next.js development with best practices for file conventions, RSC boundaries, and data fetching.

Updated Feb 2, 2026
One-click install
npx skills add https://github.com/0xarcano/UXWallet --skill next-best-practices-0xarcano
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/0xarcano/UXWallet/tree/main/frontend/.agents/skills/next-best-practices
Command: npx skills add https://github.com/0xarcano/UXWallet --skill next-best-practices-0xarcano

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance on implementing Next.js best practices, ensuring robust, efficient, and maintainable web applications.

Core Features & Use Cases

  • File Conventions: Understand project structure and special file roles.
  • RSC Boundaries: Detect and prevent invalid React Server Component patterns.
  • Data Patterns: Choose the right pattern for fetching and mutating data.
  • Use Case: A developer building a new Next.js application can use this Skill to ensure they are following optimal patterns for routing, data fetching, and component architecture from the start.

Quick Start

Review the Next.js best practices for file conventions and RSC boundaries.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
How do I structure React Server Component boundaries in Next.js?

To structure React Server Component boundaries in Next.js, you must understand the special file conventions and detect invalid RSC patterns to ensure robust component architecture and prevent data fetching errors.

What is the best way to handle data fetching and async APIs in Next.js?

The best way to handle data fetching and async APIs in Next.js is to choose the right pattern for fetching and mutating data, ensuring your web application remains efficient, scalable, and maintainable.

How do I optimize images and fonts for performance in Next.js?

To optimize images and fonts for performance in Next.js, follow specific best practices for bundling and metadata generation that address common development challenges and improve application scalability.

When should I use different runtime selections and directives in Next.js?

You should use different runtime selections and directives in Next.js based on your specific route handlers and error handling needs, ensuring you build performant and scalable web applications without invalid patterns.

Does this guidance cover error handling and metadata generation for Next.js route handlers?

Yes, this guidance covers error handling and metadata generation for Next.js route handlers, providing detailed solutions for common development challenges to ensure robust and efficient web applications.