next-best-practices

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

Updated Feb 15, 2026

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

Ready to run

npx skills add https://github.com/ignacioedlp/speed-pdf --skill next-best-practices-ignacioedlp

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and best practices for developing robust and efficient applications using the Next.js framework, helping developers avoid common pitfalls and write high-quality code.

Core Features & Use Cases

File Conventions: Understand project structure, route segments, and special files.
RSC Boundaries: Detect and prevent invalid patterns when crossing Server/Client component boundaries.
Data Patterns: Choose the right data fetching pattern (Server Components, Server Actions, Route Handlers).
Error Handling: Implement graceful error handling with error.tsx and global-error.tsx.
Use Case: A developer is unsure about the correct way to fetch data in a new Next.js project. They can consult this Skill to understand the differences between Server Components, Server Actions, and Route Handlers, and apply the most appropriate pattern.

Quick Start

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

Frequently Asked Questions about next-best-practices

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

FAQPage Schema

What is the best way to fetch data in Next.js Server Components?▼

Next.js data fetching best practices recommend using Server Components for direct data access, Server Actions for mutations, and Route Handlers for API endpoints. Choosing the right pattern depends on whether you need streaming, caching, or client-side interaction.

How do I resolve React Server Component boundary errors in Next.js?▼

React Server Component boundary errors in Next.js occur when invalid patterns cross Server and Client components. To resolve them, ensure you pass serializable props and correctly use directives to separate server-only logic from client-side interactivity.

How do I handle errors gracefully using error.tsx in Next.js?▼

Next.js error handling best practices use error.tsx for route-level recovery and global-error.tsx for application-wide boundaries. These files catch runtime errors, display fallback UI, and allow users to retry the failed segment without unmounting the layout.

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

Next.js optimization best practices involve using the built-in Image component for responsive loading and automatic format conversion. Font optimization is handled by next/font to prevent layout shifts and reduce external network requests during hydration.

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 nested layouts. Use them when you need to render multiple route segments simultaneously or intercept navigation to show contextual UI without leaving the current route.

Why does my Next.js application throw a hydration error?▼

Next.js hydration errors happen when server-rendered HTML mismatches client-side rendering. Debugging hydration errors involves checking for browser-only APIs, timestamps, or random values in your components, and ensuring consistent rendering between server and client.