skills.rest
braswelljr
braswelljrCOMMUNITY
Explore all skills by this author →
Website𝕏@braswell_jnrGitHub

next-best-practices

Enforce Next.js App Router best practices for runtime and performance correctness.

8|Updated Aug 25, 2020
Search Tags:#react#error handling#data fetching#optimization#next.js#server components#app router
One-click install
npx skills add https://github.com/braswelljr/braswelljr --skill next-best-practices-braswelljr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/braswelljr/braswelljr/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/braswelljr/braswelljr --skill next-best-practices-braswelljr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the common pain points of inconsistent Next.js codebases, unexpected runtime errors, and suboptimal performance by providing up-to-date, actionable best practices aligned with the latest Next.js versions, reducing technical debt and onboarding time for new developers.

Core Features & Use Cases

  • Comprehensive Convention Guidance: Covers App Router file structure, route segments (dynamic, catch-all, groups), parallel/intercepting routes, and middleware/proxy naming for Next.js 14 through 16+.
  • Pattern Validation & Error Prevention: Detects invalid React Server Component boundaries, async API misuse, non-serializable props, and incorrect data fetching workflows to catch bugs before runtime.
  • Performance & Debugging Tools: Includes guidance for image/font optimization, bundling fixes, hydration error resolution, and dev server MCP debugging tricks to improve app performance and developer productivity.
  • Use Case: Ideal for teams building or maintaining Next.js applications who want to enforce consistent coding standards, avoid common anti-patterns, and ensure compatibility with the latest framework releases.

Quick Start

Ask the AI to review your Next.js page component for RSC boundary violations, incorrect async params usage, and missing image optimization to get a prioritized list of fixes with code examples.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
How do I fix React Server Component boundary violations in Next.js App Router?▼

To fix async API misuse in Next.js server components, ensure asynchronous operations are handled correctly without blocking rendering. This Skill detects incorrect async API usage and data fetching workflows to prevent runtime errors.

What is the best way to optimize images and fonts in Next.js?▼

To resolve hydration errors and dev server issues in Next.js, apply specific debugging tricks and hydration error resolution patterns. This Skill includes performance and debugging tools to improve developer productivity.

Does this Next.js best practices guidance cover App Router conventions for versions 14 through 16+?▼

Yes, this guidance covers App Router conventions for Next.js versions 14 through 16+. It provides comprehensive rules for route segments, parallel and intercepting routes, and middleware naming to ensure compatibility with the latest framework releases.

Why am I getting runtime errors with incorrect data fetching patterns in Next.js?▼

Runtime errors from incorrect data fetching patterns in Next.js often occur due to invalid workflows or async API misuse. This Skill detects incorrect data fetching workflows and provides actionable guidance to fix them before runtime.

How do I structure dynamic and catch-all route segments in the Next.js App Router?▼

To structure dynamic and catch-all route segments in the Next.js App Router, follow file convention guidelines for route segments. This Skill enforces comprehensive convention guidance covering route segments, groups, and middleware naming.

Related Skills

Explore More Software Engineering Skills→
act70255act70255

nextjs-app-router-patterns

Provide Next.js 14+ App Router patterns for server-side rendering and streaming.

Community
Advanced
tapanshahtapanshah

senior-frontend

Scaffold React and Next.js projects with TypeScript, Tailwind CSS, and authentication.

Community
Advanced
HezziCodeHezziCode
1

python-type-safety

Enforce Python type safety with mypy static type checking.

Community
Intermediate
fratilanicofratilanico
7

performance-optimization

Profile and optimize React/Next.js web apps to improve Core Web Vitals.

Community
Advanced