next-best-practices

Review Next.js app-router projects for RSC, async API, metadata, and bundling issues.

Updated Apr 16, 2026
One-click install
npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill next-best-practices-duylinhdang1998
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/duylinhdang1998/claude-template-agent/tree/main/plugins/vfm-agent-company/skills/next-best-practices
Command: npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill next-best-practices-duylinhdang1998

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Consolidates authoritative Next.js app-router guidance into a single reference so engineers and reviewers can consistently avoid architecture, rendering, and bundling mistakes that cause runtime errors, hydration issues, and poor performance.

Core Features & Use Cases

  • Comprehensive Review Checklist: Covers file conventions, route segments, parallel and intercepting routes, and middleware/proxy migration.
  • RSC & Async Safety: Detects invalid React Server Component patterns, non-serializable props, async client components, and async request APIs.
  • Operational Guidance: Prescribes runtime selection, metadata and OG image generation, route handler vs server action decisions, image/font optimization, bundling fixes, and error-handling patterns for production.
  • Use Case: Use during code reviews, CI linters, PR feedback, onboarding sessions, or to build automation that flags Next.js anti-patterns.

Quick Start

Ask the skill to review a Next.js app and produce a prioritized list of fixes for file conventions, RSC boundaries, async patterns, metadata, image/font optimization, and bundling.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
How do I fix React Server Component boundary issues and async API misuse in Next.js?

Next.js best practices help fix RSC boundary issues and async API misuse by detecting invalid server component patterns, non-serializable props, and async client components. It prescribes concrete code changes to resolve these architecture and rendering mistakes in app-router projects.

What is the best way to optimize images and fonts in a Next.js app router project?

The best way to optimize images and fonts in a Next.js app router project is to follow operational guidance that prescribes specific image and font optimization configurations. This ensures you avoid common bundling errors and maintain robust performance across edge and runtime decisions.

How do I decide between using a route handler or a server action in Next.js?

Deciding between a route handler or a server action in Next.js involves evaluating route handler conflicts and operational requirements. Authoritative app-router guidance prescribes the correct runtime selection and proposes configuration changes to ensure production stability and proper error handling.

Does this Next.js review checklist support code checks for parallel and intercepting routes?

Yes, the Next.js review checklist supports code checks for parallel and intercepting routes. It covers file conventions, route segments, and middleware migration to flag anti-patterns during code reviews, CI linters, and developer onboarding sessions.

Why does my Next.js app have metadata and OG image generation mistakes?

Next.js apps encounter metadata and OG image generation mistakes due to incorrect operational configurations. Consolidated app-router guidance identifies these errors and recommends concrete code changes to fix metadata generation, runtime selection, and bundling issues.

Can I use this to automate CI checks for Next.js bundling errors and file conventions?

Yes, you can use this to automate CI checks for Next.js bundling errors and file conventions. The guidance is designed to build automation that flags Next.js anti-patterns, detecting route handler conflicts and recommending runtime selection for Next.js 15+ and 16+ compatibility.