nextjs-anti-patterns

Identify and remediate Next.js App Router anti-patterns in codebases.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/octofox1357/daebok --skill nextjs-anti-patterns-octofox1357
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-anti-patterns
Source: https://github.com/octofox1357/daebok/tree/main/.claude/skills/nextjs-anti-patterns
Command: npx skills add https://github.com/octofox1357/daebok --skill nextjs-anti-patterns-octofox1357

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers identify and fix Next.js App Router anti-patterns to improve performance, maintainability, and migration efforts from Pages Router patterns.

Core Features & Use Cases

  • Code Review Excellence: Spot common misuse of useEffect/useState, improper data fetching, and client/server component boundaries.
  • Migration Guidance: Smoothly migrate apps from Pages Router to App Router with best practices.
  • Performance & Maintainability: Promote server components, proper data loading, and avoid anti-pattern pitfalls.

Quick Start

Review a Next.js codebase and apply the anti-patterns guidance to refactor components and improve data loading and rendering.

Frequently Asked Questions about nextjs-anti-patterns

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

FAQPage Schema
How do I identify Next.js App Router anti-patterns in my codebase?

To identify Next.js App Router anti-patterns, review your codebase for common misuses of useEffect and useState, improper data fetching, and incorrect client/server component boundaries to ensure optimal performance and maintainability.

What are common Next.js server components anti-patterns to avoid?

Common Next.js server components anti-patterns include improper data fetching, unnecessary client-side state management with useEffect, and breaking client/server component boundaries, which degrade performance and maintainability.

How do I migrate from Next.js Pages Router to App Router without anti-patterns?

Migrating from Next.js Pages Router to App Router requires enforcing best practices for data fetching and component boundaries, avoiding common pitfalls to smoothly transition your application patterns.

Does this Next.js code review guidance help fix improper data fetching?

Yes, Next.js code review guidance helps fix improper data fetching by spotting common misuse and enforcing best practices for server components and proper data loading.

When should I fix client/server component boundaries in Next.js?

You should fix client/server component boundaries in Next.js during code review and migration to improve performance, maintainability, and ensure proper data loading without anti-patterns.