Does it provide guidance on folder structure?

Yes, it enforces a clean project structure using Route Groups, Parallel Routes, and organized component directories.

How does it help with Server vs. Client component decisions?

The skill provides a specific decision tree to determine if a component needs hooks or interactivity (Client) or can benefit from direct data fetching and smaller bundles (Server).

Does this skill support the Next.js Pages Router?

While it focuses primarily on the App Router introduced in Next.js 13, many core performance and SEO principles can be adapted for the Pages Router.

Can this skill help optimize my application's SEO?

Yes, it includes patterns for static and dynamic metadata generation, Open Graph tags, and canonical URL management.

What data fetching patterns are included?

It covers Static rendering, Incremental Static Regeneration (ISR), and dynamic 'no-store' fetching, along with revalidation triggers.

Next.js App Router Best Practices

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

byhongluu92

Developer Tools

Optimizes Next.js development by applying App Router principles, efficient data fetching, and performance-driven architectural patterns.

About

This skill empowers Claude to act as a senior Next.js architect, providing specialized guidance on the modern App Router ecosystem. It streamlines the decision-making process for Server vs. Client Components, implements sophisticated caching and revalidation strategies, and ensures project structures follow standardized file conventions. Whether you are optimizing Core Web Vitals through advanced image handling or securing mutations with Server Actions, this skill ensures your codebase remains performant, scalable, and aligned with the latest industry standards.

Key Features

Comprehensive data fetching, caching, and revalidation strategies
Performance optimization for images, bundles, and dynamic imports
Architectural logic for Server vs. Client Component selection
Secure and typed Server Action implementation guidelines
Standardized App Router file conventions and routing patterns
0 GitHub stars

Use Cases

Optimizing application performance and SEO metadata for production readiness
Architecting scalable data layers for enterprise-grade web applications
Migrating legacy React or Next.js Pages Router projects to the App Router

About

Key Features

Comprehensive data fetching, caching, and revalidation strategies
Performance optimization for images, bundles, and dynamic imports
Architectural logic for Server vs. Client Component selection
Secure and typed Server Action implementation guidelines
Standardized App Router file conventions and routing patterns
0 GitHub stars

Use Cases

Optimizing application performance and SEO metadata for production readiness
Architecting scalable data layers for enterprise-grade web applications
Migrating legacy React or Next.js Pages Router projects to the App Router