next-best-practices

Codify Next.js best practices for file conventions, RSC boundaries, and routing.

Updated Feb 1, 2026
One-click install
npx skills add https://github.com/harsh-m-patil/hermes --skill next-best-practices-harsh-m-patil
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/harsh-m-patil/hermes/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/harsh-m-patil/hermes --skill next-best-practices-harsh-m-patil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a concise, authoritative collection of Next.js best practices to help teams write consistent, robust, and maintainable apps, reducing onboarding time and preventing common architectural pitfalls.

Core Features & Use Cases

  • File conventions and routing guidelines that align with Next.js App Router and parallel routes.
  • RSC boundaries and React directives to separate server/client concerns and improve performance.
  • Async data patterns and routing strategies, including Server Components, Server Actions, and Route Handlers.
  • Metadata, OG images, and viewport configuration guidance to optimize SEO and accessibility.
  • Error handling, not-found pages, and debugging tips to improve reliability and maintain user trust.
  • Guidance for bundling, fonts, image optimization, and runtime decisions to maximize performance.
  • Practical use cases: code reviews, onboarding, and architectural decision making.

Quick Start

Review the Next.js best practices overview and apply the rules to a sample page by aligning file structure, components boundaries, and metadata with the guidelines. Then iterate improvements during code reviews.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
What are the Next.js App Router best practices for structuring server and client components?

Next.js best practices recommend defining React Server Component (RSC) boundaries and using React directives to separate server and client concerns, which improves application performance and maintainability.

How do I handle routing and data fetching patterns in Next.js?

You should follow Next.js best practices for file conventions and parallel routes, utilizing Server Components, Server Actions, and Route Handlers for efficient async data patterns and routing strategies.

What is the best way to configure metadata and OG images for SEO in Next.js?

Configuring metadata, OG images, and viewport settings according to Next.js best practices ensures your application meets SEO standards and maximizes accessibility for end users.

How do I implement error handling and not-found pages in a Next.js application?

Next.js best practices outline specific error handling and not-found page conventions to improve application reliability, aid debugging, and maintain user trust during failures.

Can I use these Next.js best practices for code reviews and onboarding?

Yes, these Next.js best practices are designed as an authoritative collection to standardize code reviews, reduce onboarding time, and guide architectural decision making for development teams.