next-best-practices

Audit Next.js projects for conventions across routing, data fetching, and optimization.

2|Updated Feb 13, 2026

Search Tags:#routing #metadata #nextjs #best-practices #error-handling #bundling #server-components

Ready to run

npx skills add https://github.com/yutna/vibe-next-template --skill next-best-practices-yutna

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams implement and enforce Next.js best practices to build scalable, maintainable apps.

Core Features & Use Cases

File conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, and bundling guidance.
Guidance on parallel and intercepting routes, suspense boundaries, and self-hosting considerations to improve performance and maintainability.
Practical references for debugging tricks, runtime selection, directives, and self-hosting strategies to streamline development and deployment.

Quick Start

Apply the Next.js best-practices rules to your project to ensure scalable architecture without changing runtime behavior.

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 structuring Next.js app router projects?▼

Next.js app router projects should enforce file conventions, RSC boundaries, and async patterns to ensure scalable architecture. Applying these best practices codifies route handlers, metadata, and error handling without altering runtime behavior.

How do I handle errors and async data fetching in Next.js server components?▼

Handling errors and async data fetching in Next.js server components requires enforcing async API patterns and dedicated error handling boundaries. This maintains RSC boundaries and ensures maintainable data fetching architecture.

Does this Next.js best practices guidance cover parallel and intercepting routes?▼

Yes, this Next.js best practices guidance covers parallel and intercepting routes. It provides structural conventions for these advanced routing patterns alongside suspense boundaries to improve application performance and maintainability.

How do I optimize metadata and images for Next.js applications?▼

Optimizing metadata and images for Next.js applications involves applying specific file conventions and bundling guidelines. These performance tuning practices enforce proper integration of metadata and image optimization within your app architecture.

What are the limitations when self-hosting a Next.js app with server components?▼

Self-hosting a Next.js app with server components introduces considerations around runtime selection and bundling guidelines. Proper directives and self-hosting strategies must be configured to streamline deployment without breaking RSC boundaries.