skills.rest
yldst-dev
yldst-devCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

next-best-practices

Codify Next.js best practices for file conventions, RSC boundaries, and routing.

Updated Sep 27, 2025
Search Tags:#typescript#performance#react#routing#next.js#best-practices#server-components
One-click install
npx skills add https://github.com/yldst-dev/easycalendar --skill next-best-practices-yldst-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/yldst-dev/easycalendar/tree/main/.skills/next-best-practices
Command: npx skills add https://github.com/yldst-dev/easycalendar --skill next-best-practices-yldst-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js projects often suffer from inconsistent architectures, scattered conventions, and onboarding friction. This guide consolidates best practices to improve maintainability and collaboration across teams.

Core Features & Use Cases

  • File conventions: standard project structure, naming, and segmentation for scalable apps.
  • RSC boundaries & data patterns: guidance on when to use Server Components vs Client Components, data fetching strategies, and route patterning.
  • Runtime & routing decisions: recommendations for edge vs Node runtimes, route handlers, image optimization, and fonts.
  • Metadata & error handling: patterns for static and dynamic metadata, robust error pages, and resilient UX.

Quick Start

Adopt these practices by auditing a Next.js project and applying the prescribed conventions in your codebase.

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 structuring a Next.js project with Server Components and Client Components?▼

Next.js best practices define strict file conventions and RSC boundaries, guiding when to use Server Components for data fetching versus Client Components for interactivity to ensure scalable apps.

How do I handle routing directives and metadata strategies in Next.js?▼

Handle Next.js routing directives and metadata by applying prescribed patterns for static and dynamic metadata, ensuring robust route handlers and resilient UX across typical app scenarios.

What is the recommended way to choose between edge and Node runtimes for Next.js route handlers?▼

The recommended way to choose Next.js runtimes involves evaluating edge versus Node.js capabilities based on your route handler data patterns and performance requirements.

How do I implement error handling and metadata for scalable Next.js apps?▼

Implement Next.js error handling and metadata by adopting structured patterns for error pages and dynamic metadata generation, improving maintainability and collaboration across teams.

Does this Next.js guide cover data fetching patterns and image optimization?▼

Yes, this Next.js guide covers data fetching strategies, image optimization, and font handling, providing comprehensive runtime decisions and data patterns for typical application architectures.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
AreebaZafarChohanAreebaZafarChohan

clean-code

Enforce naming conventions, folder structure, and Task-ID comments across codebases.

Community
Intermediate
getsentrygetsentry
12

next-best-practices

Consolidate Next.js best practices for routing, RSC boundaries, and data patterns.

Official
Intermediate
hheydaroffhheydaroff

fullstack-dev

Guide full-stack web application development from requirements to deployment.

Community
Intermediate