next-best-practices

Apply Next.js best practices for file conventions, RSC boundaries, and data patterns.

Updated Nov 15, 2025

Search Tags:#architecture #performance #routing #nextjs #best-practices #server-components

Ready to run

npx skills add https://github.com/billh93/snchz --skill next-best-practices-billh93

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/billh93/snchz/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/billh93/snchz --skill next-best-practices-billh93

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the adoption of Next.js best practices across teams to improve code quality, performance, and maintainability.

Core Features & Use Cases

Provides a centralized guide covering file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, and bundling.
Helps engineers review and implement robust Next.js apps, ensure consistent architecture, and accelerate onboarding for new team members.
Useful for developers needing quick, authoritative rules during code reviews, migrations, and feature development.

Quick Start

Review this guide and apply the best practices to code reviews, architecture decisions, and onboarding.

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 Next.js server components and client components correctly?▼

To structure Next.js server components and client components correctly, enforce safe RSC boundaries by applying defensible data patterns and keeping async APIs strictly within server components to maintain a robust architecture.

What are the best practices for Next.js routing and file conventions?▼

The best practices for Next.js routing and file conventions involve adhering to centralized file convention rules that ensure consistent architecture, streamline onboarding, and maintain defensible patterns across server and client components.

How do I handle errors and optimize images in Next.js?▼

To handle errors and optimize images in Next.js, apply comprehensive best practices covering robust error handling boundaries, image and font optimization techniques, and efficient bundling configurations to improve application performance.

Can I use this guide for Next.js code reviews and migrations?▼

Yes, you can use this guide for Next.js code reviews and migrations by applying its authoritative rules to ensure consistent architecture, enforce safe boundaries, and validate data patterns during feature development and onboarding.

Why does my Next.js architecture need safe boundaries and metadata handling?▼

Your Next.js architecture needs safe boundaries and metadata handling to ensure maintainability, enforce defensible patterns between server and client components, and properly manage async APIs and route handlers for robust applications.

When should I not use client components for data fetching in Next.js?▼

You should not use client components for data fetching in Next.js when you can leverage server components, as keeping async APIs and data patterns on the server enforces safe boundaries and improves overall performance.