next-best-practices

Provides authoritative coding standards and a code review workflow for idiomatic Next.js development, including TypeScript-first design, Tailwind usage, and modern App Router patterns.

137|29|Updated Feb 4, 2026
One-click install
npx skills add https://github.com/happycapy-ai/Happycapy-skills --skill next-best-practices-happycapy-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/happycapy-ai/Happycapy-skills/tree/main/skills/next-best-practices
Command: npx skills add https://github.com/happycapy-ai/Happycapy-skills --skill next-best-practices-happycapy-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance on Next.js best practices, helping developers write cleaner, more efficient, and maintainable code.

Core Features & Use Cases

  • Code Quality: Enforces file conventions, RSC boundaries, and optimal data patterns.
  • Performance: Guides on runtime selection, image/font optimization, and bundling.
  • Use Case: When reviewing a new Next.js feature or refactoring existing code, consult this Skill to ensure adherence to modern Next.js architecture and performance standards.

Quick Start

Review the provided Next.js code snippet against the best practices outlined in this skill.

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, enforce file conventions and separate client and server logic. This maintains code quality and ensures optimal data fetching patterns across your application architecture.

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

The best way to handle async API usage and data fetching in Next.js is following established patterns that respect React Server Component boundaries. This ensures optimal performance and maintainability for modern web development.

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

To optimize images and fonts for Next.js performance, apply built-in optimization strategies and proper bundling techniques. This improves runtime selection and overall application efficiency during web development.

When do I need specific error handling and metadata generation in Next.js?

You need error handling and metadata generation in Next.js when building robust route handlers. Implementing these practices ensures better code quality and maintainability for modern web applications.

Can I use this Next.js guide to refactor existing code?

Yes, you can use this Next.js guide to refactor existing code. Review your snippets against the outlined best practices to ensure adherence to modern architecture, file conventions, and performance standards.

Why does my Next.js bundling strategy impact runtime selection?

Your Next.js bundling strategy impacts runtime selection because it dictates how components and assets are loaded. Optimizing bundling improves performance and ensures efficient execution of React Server Components.