next-best-practices

Guide Next.js development with file conventions, RSC boundaries, and async patterns.

Updated May 29, 2026

Search Tags:#best practices #debugging #error handling #Next.js #metadata #scripts #bundling #image optimization #directives #self-hosting #React Server Components #parallel routes #route handlers #data patterns #font optimization #runtime selection #hydration errors #asynchronous patterns #Open Graph images

Ready to run

npx skills add https://github.com/juanca202/exercise-mobile --skill next-best-practices-juanca202

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and tools for building efficient, scalable, and maintainable Next.js applications.

Core Features & Use Cases

File Conventions: Establish best practices for file structure and naming conventions in a Next.js project.
RSC Boundaries: Understand and avoid common pitfalls when working with React Server Components.
Async Patterns: Optimize asynchronous code patterns in Next.js for better performance and maintainability.
Runtime Selection: Learn when and how to use the Edge runtime for specific scenarios.
Directives: Use Next.js directives to optimize component rendering and caching.
Error Handling: Implement robust error handling and user feedback in your Next.js app.
Data Patterns: Choose the right data fetching patterns for your application.
Route Handlers: Create and use route handlers to build RESTful APIs with Next.js.
Hydration Errors: Diagnose and fix hydration errors in Next.js applications.
Parallel & Intercepting Routes: Implement modal patterns with parallel and intercepting routes.
Self-Hosting: Deploy Next.js applications on your own server for complete control.
Debug Tricks: Use advanced debugging techniques for Next.js applications.
Image Optimization: Optimize images for performance and quality in Next.js.
Metadata & OG Images: Add SEO-friendly metadata and Open Graph images to your Next.js pages.
Font Optimization: Optimize font loading and performance in Next.js.
Bundling: Understand and optimize bundle size and performance in Next.js.
Scripts: Load and manage third-party scripts in Next.js for analytics, advertising, and more.

Quick Start

Use the next-best-practices skill to review the best practices for your Next.js project.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema

How do I fix hydration errors in Next.js applications?▼

To fix Next.js hydration errors, you must diagnose mismatches between server-rendered HTML and client-side rendering. This Skill provides advanced debugging techniques to identify and resolve these common React Server Component boundary pitfalls.

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

The best way to optimize Next.js images and fonts involves applying specific built-in conventions for performance and quality. This Skill guides you through proper font loading techniques and image optimization strategies to improve your application's overall speed.

When should I use the Edge runtime in Next.js?▼

You should use the Next.js Edge runtime for specific scenarios requiring low-latency dynamic content execution. This Skill helps you learn when and how to apply runtime selection effectively to optimize component rendering and data patterns.

How do I implement parallel and intercepting routes for modals in Next.js?▼

Implementing parallel and intercepting routes in Next.js allows you to build advanced modal patterns without losing the current page context. This Skill provides the structural guidelines needed to configure these advanced routing mechanisms correctly.

How do I add SEO-friendly metadata and Open Graph images in Next.js?▼

Adding SEO-friendly metadata and Open Graph images in Next.js requires utilizing specific file conventions and API routes. This Skill explains how to configure your pages to automatically generate and serve the appropriate metadata for social sharing.

Can I self-host a Next.js application on my own server?▼

You can self-host your Next.js application on your own server for complete control over the deployment environment. This Skill outlines the necessary bundling configurations and data patterns to ensure your app runs efficiently when deployed independently.