React (Stack) rules

Ensure that 'this' is not used in functional components. Functional components do not have a 'this' context. Use props and destructuring for data access instead.

Ensure that React list items do not use array indexes as keys. This practice can cause reordering issues and unexpected behavior. Recommend using unique identifiers instead.

Detect the use of .bind() or inline arrow functions inside JSX props. These create new functions on every render, impacting performance. Suggest moving function definitions outside the render method.

Check if React components are defined inside other components. Nested components are recreated on every render, causing unnecessary re-renders. Suggest moving them outside the parent component.

Check that JSX list components have unique key properties. Missing keys can cause unnecessary re-renders and lead to state inconsistencies.

Check if React list keys are stable and unique. Using dynamic values like Math.random() or Date.now() can cause rendering issues. Recommend using unique IDs.

Prefer Server Components for pages/layouts and move interactivity to small leaf Client Components. Only add 'use client' where browser APIs or event handlers are strictly necessary.

For dynamic data use { cache: 'no-store' } or file-level dynamic = 'force-dynamic'. For ISR use { next: { revalidate: N, tags: [...] } }.

Keep middleware fast and side-effect free (no DB writes). Narrow the matcher and skip static assets. Use Route Handlers for heavy logic.

Read secrets (process.env.*) only in Server Components, Route Handlers, or server actions. Client Components must use ONLY NEXT_PUBLIC_* variables.

Ensure that React class components' render functions return a value. Forgetting a return statement results in missing UI elements and potential bugs.

Check if React children are passed as regular props instead of being nested inside components. Passing them incorrectly can cause conflicts and reduce clarity.

Identify cases where React Context values are being reassigned dynamically. Unstable context values trigger unnecessary re-renders. Use memoization to stabilize them.

Use headers() and cookies() in Server Components, Route Handlers, or server actions; never in Client Components.

After server-side mutations, call revalidatePath or revalidateTag to refresh cached RSC data.

Always use the Next.js Image component for images with width/height (or fill) and meaningful alt text. Avoid plain <img> for app assets.

Prefer app/api route handlers over legacy pages/api. Return NextResponse.json, validate input, and handle allowed HTTP methods explicitly.

Validate and sanitize all request bodies and search params on the server using a schema (e.g., zod). Reject invalid payloads with proper status.

Use next/dynamic with { ssr: false } for large client-only components (maps, editors) and provide a lightweight loading fallback.

Do not hardcode user-visible strings in pages/layouts. Use an i18n library integrated with App Router and load dictionaries on the server.

For pure functions called repeatedly with the same inputs, memoize results; avoid recreating identical callbacks in hot paths.

For simple form submissions from RSC, use server actions with schema validation and then revalidate paths/tags. Avoid client fetch for trivial mutations.

Use <Link> from 'next/link' for internal routes; reserve <a> only for external URLs or downloadable assets.

For async routes, add loading.tsx for suspense fallbacks and error.tsx for boundaries. Use notFound() for 404 states.