Can this skill help with SEO configuration?

Yes, it includes patterns for both static and dynamic metadata generation, Open Graph images, and essential tags to improve search engine visibility.

How does it handle performance optimization?

It provides strict guidelines for image optimization, dynamic imports for heavy components, and utilizing the Next.js caching layers to minimize client-side JavaScript.

Does this skill focus on the Pages Router or App Router?

This skill is specifically optimized for the Next.js App Router, focusing on modern principles like Server Components and file-based routing conventions.

What data fetching strategies are included?

It covers various fetching patterns including static generation at build time, Incremental Static Regeneration (ISR), and dynamic fetching for every request.

Does it provide guidance on folder structure?

Yes, it outlines a standardized project structure using route groups, private folders, and specialized components like loading.tsx and error.tsx.

Next.js App Router Best Practices

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

byclaudiodearaujo

•

디자인 도구

Optimizes Next.js development by applying App Router principles, Server Component patterns, and efficient data fetching strategies.

The nextjs-best-practices skill provides a standardized framework for building high-performance web applications using the Next.js App Router. It guides Claude through the 'Server-First' architecture, helping developers decide between Server and Client components, implement complex routing patterns like parallel and intercepting routes, and manage data fetching with ISR or dynamic strategies. By leveraging this skill, developers can ensure their projects adhere to production-grade standards for SEO, image optimization, and Server Actions, effectively eliminating common anti-patterns like bloated client-side bundles and improper error handling.

주요 기능

01Comprehensive SEO and metadata implementation strategies

021 GitHub stars

03Architectural guidance for Server vs. Client Component separation

04Optimized data fetching patterns including ISR and dynamic revalidation

05Best practices for secure and typed Server Actions and API routes

06Standardized file-based routing conventions and project organization

사용 사례

01Architecting a new Next.js project using the latest App Router conventions

02Implementing advanced routing patterns like modals with intercepting routes and loading states

03Refactoring heavy Client Components into efficient Server Components to improve performance

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