skills.rest
rauell1
rauell1COMMUNITY
Explore all skills by this author →
Website𝕏@rauell_GitHub

next-best-practices

Detect Next.js App Router best-practice violations and code-quality issues.

3|Updated Mar 17, 2026
Search Tags:#metadata#nextjs#bundling#server components#app router#self-hosting#route handlers
One-click install
npx skills add https://github.com/rauell1/safaricharge --skill next-best-practices-rauell1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/rauell1/safaricharge/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/rauell1/safaricharge --skill next-best-practices-rauell1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps developers catch and prevent common Next.js App Router mistakes before they reach production, including incorrect file conventions, invalid server and client component boundaries, broken async request handling, and fragile routing or deployment choices.

Core Features & Use Cases

  • File and Route Conventions: Validate App Router structure, special files, route groups, parallel routes, intercepting routes, and proxy or middleware naming.
  • Server and Client Boundaries: Spot invalid async client components, non-serializable props, and misuse of server-only APIs or directives.
  • Data, Metadata, and Error Patterns: Guide correct use of server components, server actions, route handlers, generateMetadata, suspense boundaries, error pages, image optimization, font optimization, bundling, and self-hosting patterns.
  • Use Case: A developer can ask it to review a dashboard route tree and quickly identify where params need to be awaited, where Suspense is required, and where a route handler should replace a client-side fetch.

Quick Start

Ask the skill to review your Next.js codebase for App Router correctness, data fetching patterns, metadata, and deployment-safe best practices.

Frequently Asked Questions about next-best-practices

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

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

You can check Next.js App Router best-practice violations by reviewing file conventions, server and client boundaries, and async request APIs to ensure correct routing structure and runtime-safe configuration.

When do I need to await params in Next.js server components?▼

You need to await params in Next.js server components when accessing dynamic route data, as the App Router requires asynchronous handling of request APIs to maintain correct server and client boundaries.

How do I fix invalid server and client component boundaries in Next.js?▼

Fix invalid server and client component boundaries in Next.js by identifying non-serializable props, removing server-only APIs from client code, and correcting async client component usage.

What is the best way to optimize images and fonts in a Next.js application?▼

The best way to optimize images and fonts in Next.js is to follow App Router production guidance for asset handling, ensuring proper bundling and loading strategies to ship safer applications.

When should I use a route handler instead of a client-side fetch in Next.js?▼

Use a route handler instead of a client-side fetch in Next.js when you need to handle server-side data processing, manage API endpoints securely, or maintain proper server and client boundaries.

Does Next.js App Router require Suspense boundaries for data fetching?▼

Yes, Next.js App Router requires Suspense boundaries for certain data fetching patterns to handle loading states correctly and prevent blocking the page render during asynchronous operations.

Related Skills

Explore More Software Engineering Skills→
archive-davidarchive-david

next-best-practices

Consolidate Next.js app router conventions into a reusable code quality guide.

Official
Advanced
jaimedhenriquesjaimedhenriques

next-best-practices

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

Community
Advanced
modu-aimodu-ai
1.2k

moai-lang-typescript

Configures TypeScript projects with Vitest testing and Biome linting.

Official
Intermediate
duylinhdang1998duylinhdang1998

next-best-practices

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

Community
Advanced