What routing conventions does it follow?

The skill enforces standard Next.js file-based routing conventions including layouts, loading states, error boundaries, and advanced patterns like parallel and intercepting routes.

Can this skill help with Next.js caching issues?

Yes, it provides specific patterns for request-level caching, data-tag revalidation, and full route cache control to ensure your data stays fresh.

Does it support SEO and Metadata management?

It includes best practices for both static metadata objects and the generateMetadata function for dynamic, SEO-optimized routes and Open Graph images.

How does this skill determine when to use 'use client'?

It follows a strict decision tree that prioritizes Server Components by default, reserving Client Components specifically for hooks like useState, useEffect, or browser-specific event handlers.

Next.js App Router Best Practices

Name: Next.js App Router Best Practices
Author: andymsun

byandymsun

•

Herramientas de Diseño

Optimizes Next.js applications by enforcing App Router principles, server-first data fetching, and performance-driven architectural patterns.

This skill equips Claude with the specialized knowledge required to architect and refine modern Next.js applications using the App Router. It provides a robust framework for making critical architectural decisions, such as distinguishing between Server and Client Components and implementing efficient data fetching strategies like ISR and dynamic rendering. By integrating patterns for server actions, metadata management, and performance optimization, this skill helps developers build scalable, SEO-friendly, and high-performance web applications that adhere to the latest industry standards.

Características Principales

01Optimized API Route Handler and Server Action implementation

02Advanced performance tuning for images, bundles, and metadata

03Standardized routing organization using layouts, loading states, and error boundaries

04Comprehensive data fetching patterns including ISR and dynamic revalidation

051 GitHub stars

06Intelligent Server vs. Client Component architectural decision-making

Casos de Uso

01Implementing complex data mutation patterns using Server Actions and Zod validation

02Migrating or refactoring existing Next.js projects to the App Router architecture

03Optimizing Core Web Vitals through bundle analysis and image component best practices

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add andymsun/lawvics nextjs-best-practices

For use in Claude.ai and ChatGPT

Download Skill