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

0•

开发者工具

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

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.

主要功能

01Comprehensive data fetching, caching, and revalidation strategies

02Performance optimization for images, bundles, and dynamic imports

03Architectural logic for Server vs. Client Component selection

04Secure and typed Server Action implementation guidelines

05Standardized App Router file conventions and routing patterns

060 GitHub stars

使用场景

01Optimizing application performance and SEO metadata for production readiness

02Architecting scalable data layers for enterprise-grade web applications

03Migrating legacy React or Next.js Pages Router projects to the App Router

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hongluu92/book-tts nextjs-best-practices

For use in Claude.ai and ChatGPT

Download Skill