skills.rest
Thalfman
ThalfmanCOMMUNITY
Explore all skills by this author →
GitHub

next-best-practices

Guide Next.js development best practices covering file conventions, RSC boundaries, and async patterns.

Updated May 17, 2026
Search Tags:#development#best practices#react#optimization#next.js
One-click install
npx skills add https://github.com/Thalfman/lifegroups --skill next-best-practices-thalfman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/Thalfman/lifegroups/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/Thalfman/lifegroups --skill next-best-practices-thalfman

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive guide to best practices for Next.js development, helping you write more efficient, maintainable, and robust code.

Core Features & Use Cases

  • File Conventions: Follow Next.js's recommended file structure and naming conventions for project organization.
  • RSC Boundaries: Detect and prevent invalid React Server Component patterns.
  • Async Patterns: Learn to use Next.js 15+ async APIs effectively.
  • Runtime Selection: Choose the appropriate Node.js or Edge runtime for your project.
  • Directives: Understand and apply React and Next.js directives for server and client components.
  • Error Handling: Implement error boundaries and navigate the nuances of error handling in Next.js.
  • Data Patterns: Choose the right data fetching pattern for each use case, from Server Components to Route Handlers.
  • Route Handlers: Create API endpoints with route.ts files.
  • RSC Boundaries: Ensure your code adheres to Next.js's component boundaries.
  • Self-Hosting: Deploy Next.js outside of Vercel and optimize for production.
  • Hydration Errors: Diagnose and fix React hydration mismatch errors.
  • Parallel & Intercepting Routes: Implement modal patterns and parallel routes.
  • Debug Tricks: Speed up debugging Next.js applications with tips and tools.
  • Image Optimization: Optimize images for Next.js with the next/image component.
  • Font Optimization: Use next/font for automatic font optimization.
  • Bundling: Handle bundling issues with third-party packages and configure Next.js for better performance.
  • SEO: Enhance your website's SEO with metadata and image optimizations.
  • Quick Reference: Provide a quick reference for various Next.js features and best practices.
  • Use Case: Use this Skill to enhance your Next.js web application by applying best practices throughout development.

Quick Start

Run the next-best-practices skill to access the guide on Next.js 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 Component boundaries in Next.js?▼

Next.js best practices for RSC boundaries involve detecting and preventing invalid React Server Component patterns to ensure your code adheres to component boundaries. This guide helps you maintain proper separation between server and client components.

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

To fix React hydration errors in Next.js, this guide provides specific techniques to diagnose and resolve hydration mismatches. Proper hydration ensures your server-rendered HTML matches the client-side React rendering.

How do I create API endpoints using Route Handlers in Next.js?▼

You can create API endpoints in Next.js by using `route.ts` files to build Route Handlers. This guide covers best practices for implementing these handlers and choosing the right data fetching patterns.

Should I choose the Node.js or Edge runtime for my Next.js project?▼

Choosing the appropriate Node.js or Edge runtime depends on your specific project requirements. This guide explains runtime selection best practices to help you optimize your Next.js application's performance.

What is the best way to self-host a Next.js application outside of Vercel?▼

The best way to self-host Next.js outside Vercel involves specific optimizations for production environments. This guide covers self-hosting best practices to ensure your deployment runs efficiently.

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

You can optimize images and fonts in Next.js using the `next/image` and `next/font` components for automatic optimization. This guide explains how to enhance your website's SEO through metadata and image optimizations.

Related Skills

Explore More Software Engineering Skills→
zhu637882-stackzhu637882-stack

env-setup

Detect, install, and configure Homebrew, Node.js, pnpm, PostgreSQL, Redis, Git, then output a summary.

Community
Advanced
wesleyegbertowesleyegberto
3

nextjs-expert

Automate Next.js 14+ app architecture and deployment planning.

Community
Advanced
SnakeOSnakeO
9

debug:nextjs

Diagnose and fix Next.js SSR, hydration, routing, and build-time issues.

Community
Advanced
naviktnavikt

react-router-framework-mode

Configure React Router framework mode for routes, loaders, actions, and rendering strategies.

Official
Intermediate