next-best-practices

Provide Next.js best practices for file conventions, data fetching, and error handling.

Updated Feb 6, 2026

Search Tags:#best practices #data fetching #optimization #next.js #app router #react server components

Ready to run

npx skills add https://github.com/tylrd/homeschooltracker --skill next-best-practices-tylrd

💬 Prompt for ChatGPT / Claude Chat▼

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

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 invalid React Server Component patterns and non-serializable props.
Data Patterns: Choose the right pattern for data fetching (Server Components, Server Actions, Route Handlers).
Error Handling: Implement robust error handling with error.tsx, global-error.tsx, and navigation APIs.
Use Case: A developer is unsure about the correct way to fetch data in a client component or how to handle errors in a Server Action. This Skill provides clear rules and examples to guide them.

Quick Start

Explain the best practices for handling data fetching in Next.js client components.

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 in Next.js client components using the App Router?▼

To fetch data in Next.js client components, you should pass data from Server Components as props or use Route Handlers. This approach prevents client-side fetching overhead and maintains React Server Component boundaries.

What is the best way to handle errors in Next.js Server Actions?▼

The best way to handle errors in Next.js Server Actions is using error.tsx and global-error.tsx files. These file conventions catch unexpected errors and display fallback UIs automatically.

Why am I getting hydration errors with React Server Components in Next.js?▼

Hydration errors in Next.js usually occur when passing non-serializable props across React Server Component boundaries. Ensure that functions, classes, or DOM elements are not passed from Server to Client Components.

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

Parallel and intercepting routes in Next.js are used for advanced routing UI patterns like modals. Intercepting routes allow you to load a route within the current layout context, while parallel routes render multiple pages simultaneously.

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

You can optimize images and fonts in Next.js by utilizing the built-in next/image and next/font components. These tools automatically handle responsive sizing, lazy loading, and font preloading to improve Core Web Vitals.

Does Next.js support self-hosting with App Router optimizations?▼

Yes, Next.js supports self-hosting. You must configure your server to handle App Router features like Server Actions, image optimization, and route handlers correctly to ensure the application runs efficiently.