nextjs-best-practices

Enforce Next.js 15+ App Router patterns for architecture, performance, and reliability.

3|Updated Apr 12, 2026
One-click install
npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill nextjs-best-practices-mauriciodelrio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/mauriciodelrio/delriodev-skills/tree/main/es-skills/software/frontend/nextjs-best-practices
Command: npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill nextjs-best-practices-mauriciodelrio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Development with Next.js 15+ App Router often suffers from inconsistent patterns, suboptimal caching strategies, and scattered guidance. This Skill centralizes production-ready practices to streamline architecture and performance.

Core Features & Use Cases

  • Server Components-first guidance and guidance on when to opt into 'use client'
  • Server Actions patterns with validation, error handling, and cache strategies (revalidate, tags)
  • Middleware usage for auth redirects, security headers, and i18n considerations
  • Metadata API usage, dynamic metadata, and route handlers for API routes

Quick Start

Install this Skill and apply its recommended patterns across your Next.js 15+ projects to align architecture and improve performance.

Frequently Asked Questions about nextjs-best-practices

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

FAQPage Schema
How do I implement caching strategies in Next.js 15 App Router?

Implement caching strategies in Next.js 15 App Router using revalidate paths and tags to manage data invalidation. Consolidate production-ready patterns to enforce best practices for performance and reliability across your application architecture.

When should I use Server Components versus 'use client' in Next.js?

Use Server Components first in Next.js and opt into 'use client' only when client-side interactivity is required. This approach enforces architecture best practices by keeping data fetching and rendering server-side whenever possible.

What's the best way to validate and handle errors in Next.js Server Actions?

The best way to validate and handle errors in Next.js Server Actions is applying consolidated production-ready patterns. Include validation, error handling, and cache strategies like revalidate and tags to ensure reliability.

Can I use middleware for auth redirects and security headers in Next.js?

Yes, you can use Next.js middleware for auth redirects, security headers, and i18n considerations. Applying consolidated production-ready patterns ensures your middleware usage aligns with architecture and reliability best practices.

How do I optimize images and fonts using the Next.js App Router?

Optimize images and fonts in the Next.js App Router by applying consolidated production-ready guidance. This approach enforces best practices for performance and reliability with concrete examples and architectural checks.

How does the Next.js Metadata API work for dynamic routes?

The Next.js Metadata API works for dynamic routes by generating metadata dynamically based on route parameters. Consolidated guidance ensures correct implementation across your App Router for optimal performance and SEO reliability.