next-best-practices

Guide Next.js data fetching patterns and React Server Component boundaries.

21|16|Updated Jul 12, 2023

Search Tags:#best practices #web development #data fetching #optimization #next.js #react server components

Ready to run

npx skills add https://github.com/guillermoscript/lms-front --skill next-best-practices-guillermoscript

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance on Next.js best practices, helping developers write more efficient, maintainable, and robust applications by covering file conventions, component boundaries, data patterns, and optimization techniques.

Core Features & Use Cases

File Conventions: Understand project structure, routing, and special file roles.
RSC Boundaries: Detect and prevent invalid React Server Component patterns.
Data Patterns: Choose the right data fetching strategy (Server Components, Server Actions, Route Handlers).
Optimization: Learn about image, font, and bundling optimizations.
Use Case: A developer is unsure about the correct way to fetch data in a new Next.js 15+ project. They can consult this Skill to understand async patterns, RSC boundaries, and the differences between Server Components, Server Actions, and Route Handlers.

Quick Start

Review the best practices for handling data fetching in Next.js by reading the 'data-patterns.md' file.

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?▼

The best way to fetch data in Next.js Server Components is by using async request scopes directly within the component. This Skill guides you through choosing between Server Components, Server Actions, and Route Handlers to ensure efficient data retrieval.

How do I manage React Server Component boundaries in Next.js?▼

Managing React Server Component boundaries involves correctly separating server and client logic. This Skill helps you detect and prevent invalid RSC patterns by understanding directives and runtime selection for robust application architecture.

When should I use Server Actions versus Route Handlers in Next.js?▼

Server Actions are ideal for mutations and form submissions directly within Server Components, while Route Handlers handle API endpoints. This Skill details data patterns to help you select the right strategy for your specific use case.

How do I optimize images and bundling in a Next.js application?▼

Optimizing images and bundling in Next.js requires utilizing built-in components and configuration tools. This Skill covers optimization strategies for images, fonts, and bundling to improve your application's performance and maintainability.

What are the Next.js file conventions for routing and special files?▼

Next.js file conventions dictate project structure, routing, and special file roles. This Skill provides comprehensive guidance on understanding these conventions to build maintainable and well-structured applications.

Why does my Next.js Server Component throw an invalid pattern error?▼

Invalid pattern errors in Next.js Server Components usually occur when client-side logic breaches the RSC boundary. This Skill helps you address error handling and debugging tricks to resolve runtime selection and directive issues.