Can it assist with debugging hydration errors?

Yes, it includes specific strategies for identifying and fixing common hydration causes like browser API mismatches, date inconsistencies, and invalid HTML structures.

Does this skill support the latest Next.js 15 updates?

Yes, it is specifically designed to handle Next.js 15+ changes, including the migration to asynchronous APIs for params, cookies, and headers, as well as the new 'use cache' directive.

Does it provide guidance on self-hosting Next.js?

Yes, it covers self-hosting best practices including Docker standalone output, cache handlers for multi-instance ISR, and environment-specific configurations.

How does it handle image and font optimization?

It enforces the use of next/image and next/font, providing specific patterns for remote image configuration, responsive sizes, and Tailwind CSS font integration.

How does it help with React Server Components (RSC)?

The skill detects invalid RSC patterns, such as attempting to use async client components or passing non-serializable props across the server-client boundary.

Next.js Best Practices

Name: Next.js Best Practices
Author: liminal-ai

byliminal-ai

0•

開発者ツール

Enforces modern Next.js 15+ standards including React Server Components, async APIs, and performance optimizations for production-grade applications.

This skill acts as an automated architect for modern Next.js development, specifically targeting the architectural shifts in version 15 and the App Router. It provides comprehensive guidance on managing React Server Component (RSC) boundaries, migrating to the latest asynchronous APIs for headers and params, and implementing complex routing patterns like parallel and intercepting routes. By auditing data fetching patterns to prevent waterfalls and ensuring correct usage of optimization components for images and fonts, this skill helps developers build high-performance, scalable web applications that adhere to the framework's latest official conventions.

主な機能

01Optimizes asset loading using next/image, next/font, and next/script conventions

02Validates React Server Component (RSC) boundaries and prop serializability

03Guides migration to Next.js 15+ async APIs for params, searchParams, and cookies

04Prevents data waterfalls through optimized Suspense and preloading strategies

050 GitHub stars

06Enforces standardized error handling using error.tsx and global-error.tsx patterns

ユースケース

01Migrating legacy Next.js applications to version 15 and the App Router

02Implementing advanced UI patterns like modals via parallel and intercepting routes

03Auditing large codebases for performance bottlenecks and hydration errors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add liminal-ai/code-steward next-best-practices

For use in Claude.ai and ChatGPT

主な機能

01Optimizes asset loading using next/image, next/font, and next/script conventions

02Validates React Server Component (RSC) boundaries and prop serializability

03Guides migration to Next.js 15+ async APIs for params, searchParams, and cookies

04Prevents data waterfalls through optimized Suspense and preloading strategies

050 GitHub stars

06Enforces standardized error handling using error.tsx and global-error.tsx patterns

ユースケース

01Migrating legacy Next.js applications to version 15 and the App Router

02Implementing advanced UI patterns like modals via parallel and intercepting routes

03Auditing large codebases for performance bottlenecks and hydration errors