skills.rest
gutierrezp22
gutierrezp22COMMUNITY
Explore all skills by this author →
GitHub

next-best-practices

Guide Next.js file conventions, RSC boundaries, data fetching, and optimization.

2|Updated Jun 11, 2024
Search Tags:#best practices#data fetching#optimization#next.js#app router#react server components
One-click install
npx skills add https://github.com/gutierrezp22/administracion-departamentos --skill next-best-practices-gutierrezp22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/gutierrezp22/administracion-departamentos/tree/main/.cursor/skills/next-best-practices
Command: npx skills add https://github.com/gutierrezp22/administracion-departamentos --skill next-best-practices-gutierrezp22

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 cleaner, more efficient, and maintainable code, and avoid common pitfalls.

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 handling with error.tsx and global-error.tsx.
  • Optimization: Learn about image, font, and script optimization techniques.
  • Use Case: A developer is unsure about the correct way to fetch data in a new Next.js 15+ application and wants to ensure they are following modern best practices for performance and maintainability.

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
How do I fetch data correctly in Next.js App Router?▼

To fetch data in Next.js App Router, choose between Server Components for direct fetching, Server Actions for mutations, or Route Handlers for API endpoints. This Skill clarifies the correct data patterns.

What's the best way to avoid React Server Component boundary errors?▼

Prevent React Server Component boundary errors by validating invalid RSC patterns before runtime. This Skill helps you correctly structure server and client boundaries in Next.js.

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

Resolve hydration errors and bundling problems by following Next.js file conventions and optimization techniques. This Skill provides solutions for common hydration and bundling issues.

When should I use error.tsx and global-error.tsx in Next.js?▼

Implement error.tsx for segment-level error boundaries and global-error.tsx for root-level errors in Next.js. This Skill helps you build robust error handling patterns.

Does Next.js support image, font, and script optimization out of the box?▼

Next.js provides built-in image, font, and script optimization through special file conventions. This Skill explains how to apply these optimization techniques effectively.

What are parallel and intercepting routes in Next.js and how do they work?▼

Parallel and intercepting routes are Next.js App Router features for simultaneous route rendering and modal interception. This Skill explains how to implement these advanced routing patterns.

Related Skills

Explore More Software Engineering Skills→
LeoTechProLeoTechPro
1

nextjs-development

Develops Next.js 14+ apps using App Router, Server Components, Actions, SSR, and Tailwind CSS.

Community
Advanced
mihaicrisan04mihaicrisan04

next-best-practices

Guide Next.js developers through modern best practices for application development.

Community
Advanced
kingdoubleglazingkingdoubleglazing

frontend-dev

Standardize React/Next.js frontend development with TypeScript, Tailwind, and Vitest.

Community
Intermediate
MaciWPMaciWP
1

astro-react-integrator

Integrate React components into Astro projects with client hydration directives.

Community
Intermediate