nextjs-anti-patterns

Next.js Anti-Patterns

Overview

Identify and correct common anti-patterns in Next.js App Router applications, focusing on misuse of useEffect, improper data fetching, unnecessary client-side state, and incorrect component boundaries.

TypeScript: NEVER Use any Type

CRITICAL RULE: This codebase has @typescript-eslint/no-explicit-any enabled. Using any will cause build failures.

❌ WRONG:

function handleSubmit(e: any) { ... }
const data: any[] = [];

✅ CORRECT:

function handleSubmit(e: React.FormEvent<HTMLFormElement>) { ... }
const data: string[] = [];

Common Next.js Type Patterns

// Page props
function Page({ params }: { params: { slug: string } }) { ... }
function Page({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) { ... }

// Form events
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { ... }
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { ... }

// Server actions
async function myAction(formData: FormData) { ... }

When to Use This Skill

Use this skill when:

• Reviewing Next.js code for best practices
• Debugging performance issues in App Router apps
• Migrating from Pages Router with legacy patterns
• Code shows excessive client-side JavaScript
• Components are using useEffect unnecessarily
• Detecting waterfall data fetching patterns
• Identifying incorrect Server/Client component usage

Rendering Responsibilities

When requirements call for a page or component to present specific UI (e.g., display a banner or guard message), place that rendering responsibility in the exported component that callers actually use. Helper components are fine, but make sure they are composed so the main entry point still outputs the expected elements.

Recommended Pattern

// page.tsx
'use client';

import { BrowserGuard } from './BrowserGuard';

export default function Page() {
  return <BrowserGuard />;
}

// BrowserGuard.tsx
'use client';

export function BrowserGuard() {
  const isSafari = typeof navigator !== 'undefined' &&
    /Safari/.test(navigator.userAgent) &&
    !/Chrome/.test(navigator.userAgent);

  if (isSafari) {
    return <h1>Unsupported Browser</h1>;
  }

  return <h1>Welcome</h1>;
}