How does it handle component categorization?

It uses a structured decision tree to determine if a component should be a Server Component (default) or a Client Component based on interactivity and state requirements.

Can it help with web performance and Core Web Vitals?

Yes, it enforces performance principles including image optimization, bundle size management via dynamic imports, and efficient caching layers.

Does this skill support the legacy Next.js Pages router?

This skill is specifically designed for the Next.js App Router (version 13+) and focuses on modern React Server Component paradigms.

Does it provide guidance on data fetching?

It implements standardized patterns for fetch strategies, including Static, ISR (Revalidate), and Dynamic (No-store) data flow.

Next.js App Router Best Practices

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

byclaudiodearaujo

•

API 开发

Enforces standardized Next.js App Router principles to build high-performance, server-first web applications with optimized data patterns.

This skill equips Claude with a comprehensive architectural framework for developing modern Next.js applications using the App Router. It guides the model through critical decision-making processes such as Server vs. Client component selection, efficient data fetching strategies, and robust routing structures. By implementing standardized patterns for caching, SEO metadata, and Server Actions, it ensures that generated code is performant, scalable, and strictly follows the latest industry standards for the Next.js ecosystem.

主要功能

01Automated SEO and dynamic metadata management

02Standardized file-based routing and layout patterns

03Best practices for Server Actions and secure API Route Handlers

04Optimized data fetching and revalidation strategies

05Server-first component architecture decision logic

061 GitHub stars

使用场景

01Refactoring existing React components into optimized Server and Client components

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

03Architecting new Next.js projects using the App Router from the ground up

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro nextjs-best-practices

For use in Claude.ai and ChatGPT

Download Skill