next-best-practices

Consolidate Next.js App Router best practices into a searchable knowledge unit.

Updated May 14, 2025

Search Tags:#development #performance #routing #next.js #guidelines #best-practices #server-components

Ready to run

npx skills add https://github.com/jchademwiri/tender-track-360 --skill next-best-practices-jchademwiri

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide consolidates Next.js best practices into a single, actionable reference to reduce onboarding time and avoid common pitfalls.

Core Features & Use Cases

File conventions: Align project structure with Next.js App Router norms to improve maintainability.
RSC boundaries & data patterns: Detect and resolve server/client boundary issues and optimize data fetching strategies.
Metadata, error handling, and route handlers: Provide guidance on dynamic metadata generation, error boundaries, and API route design.
Performance & asset optimization: Tips for image/font optimization, bundling, and runtime selection.
Usage scenarios: Applies to new projects, code reviews, and mentorship.

Quick Start

Review the included guidelines and begin applying the patterns to a sample Next.js app.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema

What are the best practices for Next.js App Router file conventions?▼

Next.js App Router file conventions dictate project structure by aligning directories with routing norms to improve maintainability and enforce predictable component boundaries.

How do I resolve server and client component boundary issues in Next.js?▼

Resolve server/client boundary issues in Next.js by applying consolidated RSC data patterns to detect improper component usage and optimize data fetching strategies across your application.

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

Optimize Next.js performance by applying guidelines for image and font optimization, bundling configurations, and runtime selection to ensure efficient asset delivery and loading.

What is the best way to handle dynamic metadata and error boundaries in Next.js?▼

The best way to handle dynamic metadata and error boundaries in Next.js is by following specific route handler guidance to ensure robust API route design and user feedback.

Does this Next.js best practices guide apply to code reviews and mentorship?▼

Yes, the Next.js best practices guide applies directly to code reviews and mentorship by providing an actionable reference to reduce onboarding time and avoid common development pitfalls.

When should I not use Next.js Server Components for data fetching?▼

Consider limitations of Next.js Server Components when client-side interactivity is strictly required; use the guide's RSC boundary detection to identify when client components are necessary.