next-best-practices

Apply Next.js best-practice guidelines to project structures and code reviews.

7|Updated Apr 9, 2024

Search Tags:#routing #nextjs #best-practices #error-handling #server-components #data-fetching #image-optimization

Ready to run

npx skills add https://github.com/figueroaignacio/ai --skill next-best-practices-figueroaignacio

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Next.js best-practices guide helps teams consistently apply routing, data fetching, error handling, and performance optimizations across projects, reducing cognitive load and rework.

Core Features & Use Cases

Guidelines for file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, and bundling.
Use cases include code reviews, architecture planning, and onboarding new developers.

Quick Start

Quickly consult the best-practices reference to align on project setup and code reviews.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema

How do I structure routing and server components in a Next.js app?▼

Next.js routing and server components require enforcing file conventions and RSC boundaries. Applying these best practices ensures clear data fetching patterns and metadata handling, improving maintainability and reducing cognitive load during architecture planning.

What is the best way to handle errors and data fetching in Next.js?▼

Handling errors and data fetching in Next.js involves following specific guidelines for async APIs and error boundaries. Implementing these patterns ensures robust applications by standardizing how route handlers manage exceptions and retrieve data across project structures.

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

Image and font optimization in Next.js uses built-in components to automate bundling and delivery. Following these optimization strategies improves application performance and maintainability without manual asset compression or configuration.

Can I use these Next.js best practices for team onboarding and code reviews?▼

These Next.js best practices are directly applicable for team onboarding and code reviews. The guidelines help teams consistently apply routing, data fetching, and error handling patterns across projects, ensuring new developers align with project standards quickly.

Why does my Next.js server component break when fetching data?▼

Next.js server components break when RSC boundaries and async API patterns are violated. Reviewing data fetching guidelines and ensuring proper metadata handling resolves these architectural mismatches and restores robust application functionality.