next-best-practices

Provide architectural and performance guidelines for Next.js 15+ applications.

214|7|Updated May 29, 2026
One-click install
npx skills add https://github.com/anolilab/lunora --skill next-best-practices-anolilab
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/anolilab/lunora/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/anolilab/lunora --skill next-best-practices-anolilab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the complexity of modern Next.js development by providing a centralized, authoritative guide on file conventions, async data patterns, and performance optimization, preventing common architectural pitfalls.

Core Features & Use Cases

  • Architecture Guidance: Standardizes project structure, RSC boundaries, and runtime selection to ensure scalable, type-safe applications.
  • Performance Optimization: Provides actionable patterns for image, font, and script optimization to achieve high Core Web Vitals.
  • Debugging & Error Handling: Offers specific strategies for resolving hydration errors, managing suspense boundaries, and implementing robust error boundaries.

Quick Start

Apply the next-best-practices skill to review my current project structure and identify any invalid React Server Component patterns.

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 15?

Next.js 15 best practices for RSC boundaries involve standardizing project structure and runtime selection to separate server and client components, ensuring scalable and type-safe application architecture.

How do I resolve hydration errors in Next.js applications?

Resolving hydration errors in Next.js requires specific debugging strategies, including managing suspense boundaries and implementing robust error boundaries to handle mismatches between server and client renders.

What is the best way to optimize web performance and Core Web Vitals in Next.js?

Optimizing web performance in Next.js is achieved by applying actionable patterns for image, font, and script bundling strategies, which directly improve loading efficiency and achieve high Core Web Vitals.

How do I implement async data fetching patterns in Next.js 15?

Implementing async data fetching in Next.js 15 follows comprehensive architectural guidelines that prevent common pitfalls, ensuring correct data retrieval within your file-based routing structure and route handlers.

Can I review my existing project structure for invalid Next.js architectural patterns?

Reviewing an existing project structure for invalid Next.js patterns identifies incorrect file conventions and RSC boundary usage, preventing architectural pitfalls and facilitating production-grade compliance.