skills.rest
jtgiron
jtgironCOMMUNITY
Explore all skills by this author →
GitHub

next-best-practices

Detect Next.js App Router best-practice violations in code.

Updated May 4, 2026
Search Tags:#metadata#nextjs#bundling#hydration#app-router#rsc#route-handlers
One-click install
npx skills add https://github.com/jtgiron/portfolio --skill next-best-practices-jtgiron
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/jtgiron/portfolio/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/jtgiron/portfolio --skill next-best-practices-jtgiron

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams review Next.js App Router code for correctness, performance, and maintainability issues before they become production bugs. It reduces time spent diagnosing avoidable problems in routing, rendering boundaries, metadata, caching, and deployment configuration.

Core Features & Use Cases

  • File and route conventions: Checks special files, dynamic segments, parallel routes, intercepting routes, and proxy or middleware placement.
  • React Server Component safety: Flags invalid client component patterns, non-serializable props, and broken server or client boundaries.
  • Async and data patterns: Validates async params, cookies, headers, server actions, route handlers, and better fetch placement.
  • SEO and media optimization: Guides metadata setup, open graph images, font loading, image optimization, scripts, hydration fixes, and suspense boundaries.
  • Use case: Review an App Router project and identify the highest-impact fixes needed to align it with current Next.js best practices.

Quick Start

Review this Next.js project and list the best-practice violations, risky patterns, and recommended fixes.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
How do I find Next.js App Router best-practice violations in my project?▼

To find Next.js App Router best-practice violations, review your codebase for incorrect file conventions, broken React Server Component boundaries, invalid metadata setup, and improper async request APIs. This process identifies risky patterns and recommends fixes to prevent production bugs.

What are common React Server Component boundary issues in Next.js?▼

Common React Server Component boundary issues include passing non-serializable props to client components and mixing server-only APIs in client-side code. Validating RSC boundaries ensures data fetching patterns and async params remain correctly separated between server and client environments.

How do I fix hydration and suspense boundary errors in Next.js?▼

Fixing hydration and suspense boundary errors in Next.js requires validating your React Server Component structure and ensuring suspense boundaries wrap asynchronous data fetching. Properly configuring metadata and script loading also resolves hydration mismatches before deployment.

Does this Next.js review check route handlers and dynamic segment conventions?▼

Yes, this Next.js review checks route handlers and dynamic segment conventions. It validates special files, parallel routes, intercepting routes, and middleware placement to ensure your routing rules and server actions align with current App Router standards.

What is the best way to validate metadata and image optimization in Next.js?▼

The best way to validate metadata and image optimization in Next.js is to review open graph images, font loading, and script tags. Enforcing correct metadata setup and media optimization patterns improves SEO and overall rendering performance.

Related Skills

Explore More Software Engineering Skills→
sun33tsun33t

page-layer

Create Next.js 15 App Router pages, layouts, and route handlers.

Community
Intermediate
peancharoenpeancharoen

next-best-practices

Enforce Next.js App Router best practices for routing, RSC boundaries, and deployment readiness.

Community
Advanced
zaid-khan-codezaid-khan-code
3

react

Identify and correct React 19 performance, concurrency, and component architecture issues.

Community
Advanced
cin12211cin12211
218

nextjs-expert

Diagnose and resolve Next.js App Router, Server Components, and deployment issues.

Community
Advanced