skills.rest
Timothy191
Timothy191COMMUNITY
Explore all skills by this author →
GitHub

next-best-practices

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

Updated May 13, 2026
Search Tags:#best practices#Next.js#bundling#image optimization#self-hosting#route handlers#data patterns#font optimization#file conventions#RSC boundaries
One-click install
npx skills add https://github.com/Timothy191/BREAKILE --skill next-best-practices-timothy191
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/Timothy191/BREAKILE/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/Timothy191/BREAKILE --skill next-best-practices-timothy191

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill empowers developers to write more efficient and maintainable Next.js applications by providing best practices and insights.

Core Features & Use Cases

  • File Conventions: Learn the recommended file structure for Next.js projects.
  • RSC Boundaries: Detect and prevent invalid React Server Component patterns.
  • Async Patterns: Understand Next.js 15+ async API changes and best practices.
  • Runtime Selection: Decide when to use Node.js or Edge runtime.
  • Directives: Learn about React and Next.js directives for better code organization.
  • Error Handling: Handle errors gracefully in Next.js applications.
  • Data Patterns: Choose the right data fetching pattern for each use case.
  • Route Handlers: Create API endpoints with route.ts files.
  • RSC Boundaries: Detect and prevent invalid patterns when crossing Server/Client component boundaries.
  • Hydration Errors: Diagnose and fix React hydration mismatch errors.
  • Image Optimization: Use next/image for automatic image optimization.
  • Font Optimization: Optimize font usage with next/font.
  • Bundling: Fix common bundling issues with third-party packages.
  • Self-Hosting: Deploy Next.js outside of Vercel with confidence.
  • Debug Tricks: Speed up debugging Next.js applications.
  • Parallel & Intercepting Routes: Implement modal patterns with parallel and intercepting routes.
  • Serverless Deployment: Adapt Next.js for AWS Lambda, Cloudflare Workers, etc.
  • Health Check Endpoint: Include a health check for load balancers.
  • Pre-Deployment Checklist: Ensure all steps are followed for successful deployment.
  • Testing Cache Handler: Test your cache handler on every Next.js upgrade.
  • **Quick Start Use the next-best-practices skill to learn the best practices for Next.js development, including file conventions, RSC boundaries, data patterns, and more.

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 Next.js?▼

To fix React hydration errors in Next.js, you must detect and prevent invalid patterns when crossing React Server Component boundaries. Diagnosing these mismatch errors ensures server and client render identical content.

What is the best way to optimize images and fonts in Next.js?▼

The best way to optimize images and fonts in Next.js is using the built-in next/image and next/font modules. These provide automatic image optimization and font optimization for better performance.

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

To self-host a Next.js application outside of Vercel, follow a pre-deployment checklist and include a health check endpoint for load balancers. This ensures successful deployment and stable serverless adaptation to platforms like AWS Lambda.

When should I use Node.js vs Edge runtime for Next.js route handlers?▼

Choosing between Node.js and Edge runtime for Next.js route handlers depends on your data patterns and API requirements. Runtime selection dictates available APIs and affects how you create endpoints with route.ts files.

How do I resolve third-party bundling issues in Next.js?▼

Resolving third-party bundling issues in Next.js requires understanding module boundaries and applying correct directives. Fixing common bundling issues ensures your packages compile correctly within the framework's build system.

How do I implement modal patterns with parallel and intercepting routes in Next.js?▼

Implementing modal patterns in Next.js uses parallel and intercepting routes to handle navigation without full page transitions. This route handler technique allows rendering multiple independent route segments simultaneously.

Related Skills

Explore More Software Engineering Skills→
Fr-e-dFr-e-d
157

architecture-extract

Analyze project directory structures to generate architectural summaries.

Community
Basic
MolcajeteAIMolcajeteAI
2

serverless-patterns

Provide Node.js serverless deployment patterns for Vercel, AWS Lambda, and Cloudflare Workers.

Official
Intermediate
msichtermanmsichterman

vercel-react-best-practices

Enforce React and Next.js performance best practices for components, data fetching, routing, and bundling.

Community
Advanced
koralliskorallis
90

nextjs-server-components

Develop Next.js applications with React Server Components for server-side data fetching.

Community
Intermediate