skills.rest
siam-parvez
siam-parvezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

next-best-practices

Optimize Next.js performance and development workflows with best practices.

3|Updated Apr 7, 2026
Search Tags:#best practices#Next.js#performance optimization#development guidelines#React Server Components#data fetching patterns
One-click install
npx skills add https://github.com/siam-parvez/skill-logos --skill next-best-practices-siam-parvez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/siam-parvez/skill-logos/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/siam-parvez/skill-logos --skill next-best-practices-siam-parvez

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides guidelines and best practices to optimize performance and development workflows in Next.js applications.

Core Features & Use Cases

  • File Conventions: Follow recommended file and directory structure for organized project development.
  • RSC Boundaries: Ensure React Server Component best practices are followed to avoid common pitfalls.
  • Async Patterns: Utilize async API patterns for seamless server-side and client-side data handling.
  • Runtime Selection: Choose the appropriate runtime for your Next.js application based on specific use cases.
  • Directives: Apply React and Next.js directives for component splitting and optimization.
  • Error Handling: Implement robust error handling for a smoother user experience.
  • Data Patterns: Choose the right data fetching pattern for different scenarios.
  • Route Handlers: Create API endpoints with route.ts files for server-side API functionality.
  • RSC Boundaries: Detect and prevent invalid Server/Client component patterns.
  • Hydration Errors: Diagnose and fix React hydration mismatch errors.
  • Image Optimization: Optimize images for fast loading and efficient use of resources.
  • Font Optimization: Optimize font delivery for fast loading and improved user experience.
  • Bundling: Manage third-party package bundling issues for optimal performance.
  • Self-Hosting: Learn how to self-host Next.js applications for full control over deployment.
  • Parallel & Intercepting Routes: Implement modal patterns with parallel and intercepting routes.
  • Debug Tricks: Use Next.js debugging tools for efficient issue resolution.
  • SEO Best Practices: Apply best practices for search engine optimization.
  • OG Image Generation: Generate dynamic Open Graph images for social media sharing.
  • Quick Reference: Provide quick references for common Next.js features and patterns.

Quick Start

Load the skill and refer to the various sections for detailed information and guidelines.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
What's the best way to structure Next.js project files and directories?▼

Next.js project structure should follow recommended file conventions for organized development. This includes standardizing directory layouts to maintain clear separation of concerns and improve application maintainability.

How do I prevent React Server Component boundary errors in Next.js?▼

To prevent React Server Component boundary errors, follow RSC best practices to detect and prevent invalid Server and Client component patterns. This ensures correct component splitting and avoids common architectural pitfalls.

How do I fix React hydration mismatch errors in Next.js?▼

Fixing React hydration errors involves diagnosing the mismatch between server-rendered and client-rendered HTML. Applying correct Next.js directives and RSC patterns helps resolve these hydration issues for a smoother experience.

What data fetching patterns should I use for Next.js Server Components?▼

Next.js Server Components should utilize async API patterns and specific data fetching patterns based on the scenario. Choosing the right pattern ensures seamless server-side and client-side data handling and optimal performance.

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

Optimizing images and fonts in Next.js requires applying built-in optimization techniques for efficient resource delivery. This ensures fast loading times and improved user experience across the application.

Can I self-host a Next.js application with custom API route handlers?▼

Yes, you can self-host Next.js applications for full control over deployment. This involves creating API endpoints with route.ts files and configuring the appropriate runtime for your specific server-side use cases.

Related Skills

Explore More Software Engineering Skills→
PostHogPostHog
58

instrument-integration

Instrument PostHog SDKs across popular web and mobile frameworks with verified configuration.

Official
Advanced
hopeoverturehopeoverture
6

performance-budget-enforcer

Enforce performance budgets on bundle sizes, Lighthouse scores, and Web Vitals in CI/CD pipelines.

Community
Advanced
DonnadieuDonnadieu
2

frontend

Enforce React and TypeScript UI patterns for the Continuum platform.

Community
Intermediate
mgd34msumgd34msu
4

solidstart

Develop full-stack SolidStart applications with SSR, SSG, and server functions.

Community
Advanced