How does it handle data fetching?

It implements patterns for Server Component fetching, ISR revalidation, and dynamic no-store strategies based on specific use cases.

Can it help with UI optimization?

Yes, it includes guidance for next/image optimization, responsive sizes, and bundle reduction via dynamic imports.

Does this skill support the Pages Router?

While focused on the modern App Router, it can assist with migration patterns, though it prioritizes Server Components and current Next.js defaults.

Does it cover API development?

Absolutely, it provides patterns for Route Handlers, input validation with Zod, and proper status code management.

Next.js Best Practices

Name: Next.js Best Practices
Author: lev-os

bylev-os

•

デザインツール

Enforces Next.js App Router architectural principles, Server Component patterns, and performance optimizations.

This skill provides Claude with specialized knowledge for building modern Next.js applications using the App Router. It guides the model in making architectural decisions between Server and Client components, implementing efficient data fetching strategies, and utilizing advanced routing features like parallel and intercepting routes. By applying these best practices, developers can ensure their applications are SEO-optimized, maintainable, and leverage the full power of the React ecosystem.

主な機能

01Intelligent Server vs. Client component classification

02Optimized data fetching and ISR caching strategies

03Advanced App Router file convention implementation

04Performance-focused image and bundle optimization

051 GitHub stars

06Server Action integration for secure data mutations

ユースケース

01Scaffolding complex dashboard layouts with parallel routes and loading states.

02Implementing high-performance SEO-optimized landing pages with dynamic metadata.

03Refactoring legacy Next.js Pages Router code to the modern App Router architecture.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lev-os/agents nextjs-best-practices

For use in Claude.ai and ChatGPT

主な機能

01Intelligent Server vs. Client component classification

02Optimized data fetching and ISR caching strategies

03Advanced App Router file convention implementation

04Performance-focused image and bundle optimization

051 GitHub stars

06Server Action integration for secure data mutations

ユースケース

01Scaffolding complex dashboard layouts with parallel routes and loading states.

02Implementing high-performance SEO-optimized landing pages with dynamic metadata.

03Refactoring legacy Next.js Pages Router code to the modern App Router architecture.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lev-os/agents nextjs-best-practices

For use in Claude.ai and ChatGPT