next-best-practices

Guide Next.js development with best practices for file conventions, data fetching, and error handling.

Updated Mar 12, 2026

Search Tags:#best practices #web development #react #next.js #performance optimization #app router

Ready to run

npx skills add https://github.com/man-navlakha/everride --skill next-best-practices-man-navlakha

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/man-navlakha/everride/tree/main/.continue/skills/next-best-practices
Command: npx skills add https://github.com/man-navlakha/everride --skill next-best-practices-man-navlakha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and best practices for developing with Next.js, ensuring efficient, maintainable, and performant applications.

Core Features & Use Cases

File Conventions: Understand project structure, route segments, and special files.
RSC Boundaries: Detect and prevent invalid React Server Component patterns.
Data Patterns: Choose the right data fetching strategy (Server Components, Server Actions, Route Handlers).
Error Handling: Implement robust error boundaries and navigation error handling.
Optimization: Learn best practices for image, font, and script optimization.
Use Case: A developer is unsure about the correct way to fetch data in a new Next.js 15+ project, or how to properly handle errors in a complex route. This Skill provides clear, actionable advice.

Quick Start

Review the best practices for handling data fetching in Next.js.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema

How do I fetch data correctly in Next.js App Router?▼

Next.js data fetching should use Server Components for direct database access, Server Actions for mutations, and Route Handlers for external API endpoints, ensuring efficient and maintainable data patterns.

What are the best practices for React Server Component boundaries in Next.js?▼

React Server Component boundaries require careful separation of server and client logic, using directives appropriately to prevent invalid patterns and maintain optimal rendering performance.

How do I handle hydration errors in Next.js?▼

Hydration errors in Next.js can be resolved by ensuring server-rendered HTML matches client output, using Suspense boundaries effectively, and following proper component hydration patterns.

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

Next.js image and font optimization involves using built-in components for automatic resizing, responsive loading, and font subsetting to improve application performance and loading speed.

When should I use parallel and intercepting routes in Next.js?▼

Parallel and intercepting routes in Next.js are used for advanced routing patterns like modals and dynamic layouts, allowing simultaneous rendering of multiple route segments within a single view.

How do I implement error handling and error boundaries in Next.js?▼

Error handling in Next.js requires implementing error boundaries for component-level failures and navigation error handling for route transitions, ensuring robust user experiences during failures.