skills.rest
Extremez-Surya
Extremez-SuryaCOMMUNITY
Explore all skills by this author →
GitHub

next-best-practices

Provide best practices for developing efficient Next.js applications.

Updated May 31, 2026
Search Tags:#best practices#web development#react#next.js#performance optimization#application architecture
One-click install
npx skills add https://github.com/Extremez-Surya/onlineruler --skill next-best-practices-extremez-surya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/Extremez-Surya/onlineruler/tree/main/.agents/skills/nextjs/upstream
Command: npx skills add https://github.com/Extremez-Surya/onlineruler --skill next-best-practices-extremez-surya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and best practices for writing efficient and maintainable Next.js applications, improving developer productivity and application performance.

Core Features & Use Cases

  • File Conventions: Standardizes file and directory organization for clarity and ease of navigation.
  • RSC Boundaries: Ensures React Server Components are used correctly to maintain server-side rendering and performance.
  • Async Patterns: Optimizes asynchronous API usage for improved user experience and performance.
  • Runtime Selection: Offers guidance on choosing the right runtime for specific use cases.
  • Directives: Details the usage of React and Next.js directives for component splitting and caching.
  • Functions: Explains the use of various Next.js functions like cookies, headers, and generateMetadata.
  • Error Handling: Provides strategies for effective error handling in Next.js applications.
  • Data Patterns: Outlines best practices for data fetching and state management.
  • Route Handlers: Offers insights into creating and managing API endpoints with Next.js.
  • Image Optimization: Guides on optimizing images for Next.js applications.
  • Font Optimization: Best practices for using custom fonts in Next.js.
  • Bundling: Techniques for optimizing JavaScript bundle size and performance.
  • Self-Hosting: Steps for deploying Next.js applications outside of Vercel.
  • Debugging: Tips and tricks for efficient debugging of Next.js applications.

Quick Start

Use the next-best-practices skill to review your Next.js application against the provided best practices.

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 React Server Components boundaries in Next.js?▼

Next.js RSC boundaries best practices ensure React Server Components are used correctly to maintain server-side rendering and performance. This Skill provides guidelines to properly separate server and client components for application architecture.

How do I optimize images and custom fonts in Next.js applications?▼

To optimize images and custom fonts in Next.js applications, this Skill provides specific guidelines for image and font optimization. These best practices improve web development efficiency and overall application performance.

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

The best way to handle asynchronous patterns and data fetching in Next.js involves optimizing API usage for better user experience. This Skill outlines data patterns and async API usage to maintain efficient and maintainable applications.

How to self-host a Next.js application outside of Vercel?▼

To self-host a Next.js application outside of Vercel, this Skill provides specific deployment steps and bundling techniques. It covers self-hosting configurations to ensure your application runs efficiently in custom environments.

Do I need prior React knowledge to use Next.js file conventions and directives?▼

Yes, you need prior knowledge of Next.js and React to effectively use file conventions and directives. This Skill requires existing framework familiarity to apply guidelines for component splitting, caching, and directory organization.

Why does choosing the right runtime matter for Next.js route handlers?▼

Choosing the right runtime for Next.js route handlers matters because it impacts API endpoint performance and execution environments. This Skill offers guidance on runtime selection to optimize route handler creation and management.

Related Skills

Explore More Software Engineering Skills→
global-osglobal-os

nextjs

Guide Next.js routing, data fetching, caching, and security best practices.

Official
Advanced
Rikinshah787Rikinshah787
5

overdrive

Analyzes web performance bottlenecks and optimizes rendering, JavaScript bundles, and asset loading.

Community
Advanced
JaivishChauhanJaivishChauhan
6

backend-api

Build secure Next.js server-side APIs with Server Actions and Zod validation.

Community
Advanced
akillnessakillness
40

performance-optimization

Identify and fix performance bottlenecks in frontend and backend systems.

Community
Advanced