next-best-practices

Provide Next.js development guidelines for file structure, components, data handling, and APIs.

495|41|Updated Apr 22, 2025
One-click install
npx skills add https://github.com/glassflow/clickhouse-etl --skill next-best-practices-glassflow
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/glassflow/clickhouse-etl/tree/main/ui/.agents/skills/next-best-practices
Command: npx skills add https://github.com/glassflow/clickhouse-etl --skill next-best-practices-glassflow

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides guidelines to optimize Next.js development, enhancing the efficiency and quality of your Next.js applications.

Core Features & Use Cases

  • File Conventions: Defines best practices for file structure and naming conventions.
  • RSC Boundaries: Identifies invalid React Server Component patterns and their consequences.
  • Async Patterns: Offers best practices for handling Next.js 15+ async API changes.
  • Runtime Selection: Discusses the use of Node.js and Edge runtime in Next.js.
  • Directives: Explains the use of React and Next.js directives for code organization and functionality.
  • Error Handling: Outlines error handling strategies in Next.js.
  • Data Patterns: Provides guidelines on data fetching patterns within Next.js.
  • Route Handlers: Discusses the creation of API endpoints with route.ts files.
  • RSC Boundaries: Prevents invalid patterns when crossing Server/Client component boundaries.
  • Parallel & Intercepting Routes: Describes parallel and intercepting routes for modal patterns.
  • Self-Hosting: Offers instructions for self-hosting Next.js applications.
  • Debug Tricks: Provides tips for debugging Next.js applications.

Quick Start

Install the skill and explore the provided documentation for detailed guidelines and examples.

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 structuring files and naming conventions in Next.js?

Next.js best practices for file structure involve defining clear file conventions to organize your project efficiently. This ensures maintainable code by standardizing how files and directories are named and grouped.

How do I handle invalid React Server Component (RSC) boundaries in Next.js?

Handling invalid React Server Component boundaries requires identifying invalid RSC patterns and understanding their consequences. This prevents errors when crossing Server and Client component boundaries.

What is the best way to handle async API changes in Next.js 15+?

The best way to handle Next.js 15+ async API changes is by following specific async patterns. These patterns provide best practices for managing asynchronous operations and ensuring compatibility.

How do I create API endpoints using route.ts files in Next.js?

Creating API endpoints with route.ts files involves using Next.js Route Handlers. This approach provides guidelines for building API endpoints and managing data fetching patterns within your application.

Can I use parallel and intercepting routes for modal patterns in Next.js?

Yes, you can use parallel and intercepting routes in Next.js to implement modal patterns. This technique allows you to build complex interfaces by intercepting routing behavior and rendering routes in parallel.

What should I consider when self-hosting a Next.js application?

When self-hosting a Next.js application, you should consider specific instructions for deployment and runtime selection. This includes understanding the use of Node.js and Edge runtime environments.