skills.rest
ckyeon
ckyeonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

next-best-practices

Provides coding guidelines and best practices for building Next.js applications.

Updated May 16, 2026
Search Tags:#best practices#performance#debugging#optimization#next.js#guidelines
One-click install
npx skills add https://github.com/ckyeon/claude-code-settings --skill next-best-practices-ckyeon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/ckyeon/claude-code-settings/tree/main/project-templates/nextjs/.claude/skills/next-best-practices
Command: npx skills add https://github.com/ckyeon/claude-code-settings --skill next-best-practices-ckyeon

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides comprehensive guidelines and best practices for building Next.js applications, enhancing code quality, and optimizing performance.

Core Features & Use Cases

  • File Conventions: Offers guidelines for organizing projects, understanding route structures, and managing special files.
  • RSC Boundaries: Helps developers detect and prevent invalid patterns in Server/Client component interactions.
  • Async Patterns: Explains Next.js 15+ async API changes and best practices for handling async operations.
  • Error Handling: Describes how to handle errors gracefully in Next.js applications, including error boundaries and navigation API gotchas.
  • Data Patterns: Provides a decision tree and patterns for data fetching, including Server Components, Server Actions, and Route Handlers.
  • Route Handlers: Explains how to create API endpoints with route.ts files and how to handle different HTTP methods.
  • Bundling: Offers solutions for common bundling issues with third-party packages and provides insights into optimizing bundle size.
  • Debugging: Suggests various debugging tricks for Next.js applications, including the MCP endpoint and rebuilding specific routes.
  • Directives: Details React directives and Next.js-specific directives for controlling component behavior and caching.
  • Hydration Errors: Diagnoses and fixes React hydration mismatch errors, including common causes and solutions.
  • Image Optimization: Shows how to optimize images using next/image and configure remote images.
  • Metadata: Describes how to add SEO metadata to Next.js pages and use the Metadata API.
  • Parallel & Intercepting Routes: Explains parallel routes and intercepting routes for creating modal patterns.
  • Self-Hosting: Provides information on self-hosting Next.js, including Docker deployment, PM2 deployment, and cache handlers.
  • Suspense Boundaries: Discusses the use of Suspense boundaries for client hooks that cause CSR bailout.
  • Runtime Selection: Guides on choosing the appropriate runtime for Next.js applications.
  • Scripts: Shows how to load third-party scripts in Next.js using next/script and loading strategies.
  • Provenance: Lists the provenance of the skill unit, including the source, commit, and license.

Quick Start

Use the next-best-practices skill to learn and apply best practices for your Next.js project.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
How do I fix React hydration mismatch errors in a Next.js application?▼

To fix React hydration mismatch errors in Next.js, diagnose common causes like invalid Server/Client component interactions or CSR bailout from client hooks. Use Suspense boundaries to handle asynchronous rendering differences gracefully.

What is the best way to fetch data in Next.js using Server Components and Route Handlers?▼

The best way to fetch data in Next.js is following a decision tree pattern that evaluates Server Components, Server Actions, and Route Handlers. Use route.ts files to create API endpoints and handle different HTTP methods directly.

How do I optimize images and third-party scripts for performance in Next.js?▼

Optimize images in Next.js using the next/image component and configure remote images properly. Load third-party scripts using next/script with appropriate loading strategies to minimize bundle size and improve performance.

How do I handle async API changes and Server/Client component boundaries in Next.js 15+?▼

Handle Next.js 15+ async API changes by applying updated async patterns. Detect and prevent invalid RSC boundary patterns to ensure correct Server and Client component interactions and avoid rendering errors.

What are the best practices for self-hosting a Next.js application with Docker?▼

Self-hosting Next.js applications requires configuring Docker or PM2 deployments and setting up appropriate cache handlers. Ensure you select the correct runtime and apply proper bundling solutions for third-party packages.

How do I use parallel and intercepting routes to create modal patterns in Next.js?▼

Create modal patterns in Next.js using parallel and intercepting routes. Combine these with proper file conventions and route structures to manage complex navigation UIs and intercept routing actions effectively.

Related Skills

Explore More Software Engineering Skills→
JoshCantCodeJoshCantCode

next-best-practices

Consolidate Next.js best practices for file conventions, RSC boundaries, and route handling.

Community
Intermediate
jovermierjovermier
1

convex-self-hosting

Deploy and operate a self-hosted Convex backend with Docker and authentication.

Community
Advanced
cr8297408cr8297408

nextjs-optimization

Audit Next.js App Router projects for Core Web Vitals, SEO, and performance.

Community
Advanced
Asymmetric-alAsymmetric-al
417

next-best-practices

Guide Next.js file conventions, RSC boundaries, and data fetching patterns.

Official
Advanced