skills.rest
Marshall-Hallenbeck
Marshall-HallenbeckCOMMUNITY
Explore all skills by this author →
𝕏@mjhallenbeckGitHub

next-best-practices

Review Next.js 15+ applications for architectural compliance and best practices.

5|1|Updated Oct 18, 2019
Search Tags:#architecture#performance#web development#frontend#react#nextjs
One-click install
npx skills add https://github.com/Marshall-Hallenbeck/dot_files --skill next-best-practices-marshall-hallenbeck
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/Marshall-Hallenbeck/dot_files/tree/main/.claude/skills/next-best-practices
Command: npx skills add https://github.com/Marshall-Hallenbeck/dot_files --skill next-best-practices-marshall-hallenbeck

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the complexity of migrating to and maintaining modern Next.js applications by providing a centralized, authoritative source for best practices, architectural boundaries, and performance optimization strategies.

Core Features & Use Cases

  • Architectural Guidance: Enforces correct RSC boundaries, runtime selection, and data fetching patterns to prevent common hydration and performance issues.
  • Migration Support: Provides clear instructions for Next.js 15+ async API changes, bundling fixes, and metadata management.
  • Use Case: When refactoring a legacy page to the App Router, use this skill to verify your route handlers, suspense boundaries, and image optimization strategies to ensure a performant and error-free implementation.

Quick Start

Apply the next-best-practices skill to review my current page.tsx for invalid async patterns and hydration risks.

Frequently Asked Questions about next-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure async data fetching patterns in Next.js 15 App Router?▼

To structure async data fetching in Next.js 15, enforce correct React Server Component boundaries and use suspense boundaries to prevent hydration issues. This ensures proper architectural compliance and optimizes web performance during server-side rendering.

What are the best practices for migrating legacy pages to the Next.js App Router?▼

Migrating to the Next.js App Router requires verifying route handlers, suspense boundaries, and image optimization strategies. Apply architectural guidelines to ensure proper runtime selection, metadata management, and technical compliance with modern web development standards.

How does bundling optimization work for React Server Components in Next.js 15+?▼

Bundling optimization in Next.js 15+ involves fixing bundler configurations and enforcing RSC boundaries to reduce payload sizes. This architectural approach prevents common performance bottlenecks and ensures efficient frontend web development delivery.

When do I need suspense boundaries in Next.js 15+ frontend architecture?▼

Suspense boundaries are needed in Next.js 15+ when implementing async API changes and fetching data within React Server Components. They prevent hydration mismatches and handle loading states gracefully during server-side rendering transitions.

Why does my Next.js 15 page.tsx have invalid async patterns and hydration risks?▼

Invalid async patterns and hydration risks in Next.js 15 page.tsx occur when React Server Component boundaries are violated or async data fetching is misconfigured. Applying architectural guidelines verifies route handlers and corrects runtime selection.

Related Skills

Explore More Software Engineering Skills→
georgekhananaevgeorgekhananaev
27

nextjs-senior-dev

Scaffold and audit Next.js App Router apps with Server Components-first architecture.

Community
Advanced
treephesianstreephesians

next-best-practices

Check Next.js projects for best practice violations across file conventions and async APIs.

Community
Advanced
Arupbiswas09Arupbiswas09

nextjs-core

Analyze Next.js App Router code for routing and component boundary issues.

Community
Intermediate
martinezharomartinezharo

tailwind-css-patterns

Provides utility-first styling patterns and architectural guidance for Tailwind CSS.

Community
Intermediate