home / skills / jcastillotx / vibe-skeleton-app / nextjs-best-practices

nextjs-best-practices skill

safe

This skill guides Next.js App Router best practices to optimize performance, server components, data fetching, and deployment across modern apps.

npx playbooks add skill jcastillotx/vibe-skeleton-app --skill nextjs-best-practices

Review the files below or copy the command above to add this skill to your agents.

Files (30)

SKILL.md

1.6 KB

---
name: nextjs-best-practices
description: Next.js App Router development standards. Triggers when working with Next.js applications, Server Components, Server Actions, or App Router patterns.
trigger_patterns:
  - next.js
  - nextjs
  - app router
  - server component
  - use server
  - use client
  - app/
  - next/image
  - next/font
auto_load_with:
  - react-best-practices
  - javascript-best-practices
---

# Next.js Best Practices

Comprehensive coding standards for Next.js App Router applications, optimized for AI agents and LLMs.

## Overview

This skill provides 24 rules organized across 8 performance categories:

1. **App Router (app-)** - Server Components, layouts, loading states [CRITICAL]
2. **Data Fetching (fetch-)** - Caching, revalidation, streaming [CRITICAL]
3. **Server Actions (actions-)** - Form handling, mutations, optimistic updates [HIGH]
4. **Rendering (render-)** - SSR vs SSG vs ISR, dynamic vs static [HIGH]
5. **Middleware (middleware-)** - Edge functions, redirects, rewrites [MEDIUM-HIGH]
6. **Asset Optimization (assets-)** - next/image, next/font, placeholders [MEDIUM]
7. **Route Handlers (routes-)** - API endpoints, streaming responses [MEDIUM]
8. **Deployment (deploy-)** - Vercel config, edge runtime, static export [LOW-MEDIUM]

## Usage

Reference this skill when:
- Building new Next.js applications
- Migrating from Pages Router to App Router
- Optimizing Next.js performance
- Implementing Server Components or Server Actions
- Configuring caching and revalidation strategies

## Build

```bash
pnpm build    # Compile rules to AGENTS.md
pnpm validate # Validate rule files
```

Overview

This skill codifies Next.js App Router development standards for building fast, maintainable applications. I provide concise rules across App Router patterns, data fetching, Server Actions, rendering choices, middleware, asset optimization, route handlers, and deployment guidance to drive consistent, high-quality implementations.

How this skill works

The skill inspects code patterns and architectural decisions against a set of 24 practical rules grouped by priority. It flags common pitfalls and recommends concrete changes for Server Components, caching strategies, streaming, Server Actions, middleware behavior, and asset handling to improve performance and developer ergonomics.

When to use it

Starting a new Next.js app using the App Router
Migrating from Pages Router to App Router patterns
Implementing Server Components or Server Actions
Designing data fetching and caching/revalidation strategies
Optimizing middleware, assets, and deployment for performance

Best practices

Prefer Server Components for UI that doesn’t require client interactivity to reduce client bundle size
Use fetch with appropriate cache/revalidate options and prefer streaming for large payloads
Keep Server Actions focused and idempotent; validate inputs and handle optimistic UI updates carefully
Choose SSR, SSG, or ISR based on data volatility; avoid overusing dynamic rendering for static content
Leverage next/image and next/font for automatic optimization and set sensible placeholders
Use middleware sparingly at the edge for routing logic, redirects, and auth checks to limit cold starts

Example use cases

Enforcing Server Component boundaries when converting legacy components during a migration
Selecting caching and revalidation values for product listing and cart APIs
Designing a Server Action workflow for form submissions with optimistic updates
Implementing streaming responses for large datasets and progressive hydration
Configuring middleware to handle authorization redirects at the edge before reaching pages

FAQ

When should I prefer Server Components over Client Components?

Use Server Components when the UI does not need client-side state or event handlers; this reduces client bundle size and improves load performance.

How do I choose between SSR, SSG, and ISR?

Use SSG for mostly static pages, SSR for per-request personalized content, and ISR to combine static generation with scheduled revalidation for frequently changing data.