When should I use Server Components versus Client Components?

The skill provides a decision tree recommending Server Components by default for data fetching and static content, while reserving Client Components for interactive UI elements like forms and event handlers.

What is the primary focus of the nextjs-best-practices skill?

The skill focuses on guiding developers through the Next.js App Router architecture, specifically emphasizing the correct use of Server Components, efficient data fetching, and performance optimization.

How does it handle data mutations?

It advocates for the use of Server Actions for form submissions and data mutations, ensuring they are marked with 'use server' and include proper input validation.

Does it support API development within Next.js?

Yes, it provides best practices for Route Handlers (GET, POST, etc.) using Zod for validation and standardizing error responses.

Does this skill help with Next.js SEO?

Yes, it includes specific patterns for implementing static and dynamic metadata, Open Graph tags, and canonical URLs to ensure high search engine visibility.

Next.js App Router Best Practices

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

byclaudiodearaujo

•

開発者ツール

Implements high-performance Next.js App Router architectures using Server Components and optimized data fetching patterns.

This skill provides Claude with a comprehensive framework for developing modern Next.js applications using the App Router. It enforces best practices for distinguishing between Server and Client components, implementing efficient data fetching strategies, and managing complex routing patterns. By integrating this skill, developers can ensure their projects utilize optimized caching, secure Server Actions, and SEO-friendly metadata, resulting in faster, more maintainable, and production-ready React applications.

主な機能

01Automated Metadata and SEO configuration guidance

02Performance-focused Image and Bundle optimization

03Advanced Route Handler and Server Action patterns

04Optimized Data Fetching and Caching strategy implementation

051 GitHub stars

06Server vs. Client Component architectural decision tree

ユースケース

01Migrating legacy Next.js Pages router projects to the modern App Router architecture.

02Architecting scalable data fetching layers with revalidation and ISR support.

03Optimizing application performance through dynamic imports and server-side rendering.

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

主な機能

01Automated Metadata and SEO configuration guidance

02Performance-focused Image and Bundle optimization

03Advanced Route Handler and Server Action patterns

04Optimized Data Fetching and Caching strategy implementation

051 GitHub stars

06Server vs. Client Component architectural decision tree

ユースケース

01Migrating legacy Next.js Pages router projects to the modern App Router architecture.

02Architecting scalable data fetching layers with revalidation and ISR support.

03Optimizing application performance through dynamic imports and server-side rendering.

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