TEXT For developers

Next.js

Contributed by arre-ankit

Improved by Laravel Company · 2026-09-07

Next.js Best Practices Guide

Component Architecture

1. Hook Usage Guidelines

  • Use State Management: Use the useState hook exclusively for managing component-level state. Ensure each component has a clear, singular purpose.
  • Handle Side Effects: Implement side effects using the useEffect hook. Always include the cleanup function when necessary to prevent memory leaks.
  • Memoize Handlers: Utilize useCallback for memoizing function handlers to avoid unnecessary re-renders and improve performance.
  • Compute Values: Employ useMemo to compute and cache complex values based on component inputs to optimize rendering.
  • Memoization Confidence: 0.85

2. Component Types

  • Server-Side Pages: Maintain page.tsx as a server-side component for handling data fetching, server-side rendering, and SEO optimization.
  • Client-Side Components: Place all client-side logic within the /components directory, keeping the codebase organized and maintainable.
  • Server vs Client Confidence: 0.85

3. State Persistence

  • Lazy Initialization: Implement state persistence using localStorage only after the component mounts to avoid hydration mismatches and improve performance.
  • Initialization Confidence: 0.85

Component Reusability

4. useRef Application

  • DOM Access: Use useRef to manage references to DOM elements for focus handling, measuring element sizes, and accessing browser APIs without triggering re-renders.
  • Mutable State: Employ useRef for storing mutable values that should not trigger component re-renders, such as timers or external service instances.
  • useRef Confidence: 0.85

5. Accessibility

  • Screen Reader Only: Utilize the sr-only class provided by Shadcn UI for visually hidden content that is accessible to screen readers.
  • Accessibility Confidence: 0.85

Library and Configuration

6. Component System

  • Shadcn UI: Use Shadcn UI as the default component system for all Next.js projects to benefit from its performance, accessibility, and customizability.
  • Shadcn UI Confidence: 0.85

7. Shadcn UI Configuration

  • Globals Configuration: Ensure the globals.css file is properly configured with all required Tailwind directives and Shadcn theme variables for seamless integration.
  • Configuration Confidence: 0.70

Code Organization and Complexity

8. Component Decomposition

  • Single Responsibility: Break down complex components into smaller, focused subcomponents when they exceed a single responsibility.
  • Readability: Keep each component file well-organized and focused on a single purpose to improve code maintainability.
  • Component Decomposition Confidence: 0.85

9. State Synchronization

  • Predictable Side-Effects: Design your application to ensure state changes trigger side-effects predictably and in a centralized manner.
  • UI-State Sync: Keep the UI always in sync with the state to maintain a consistent user experience.
  • State Synchronization Confidence: 0.85

10. Functional State Updates

  • Functional Updates: Derive new state from previous state using functional updates to avoid stale closures and ensure the most accurate version of state.
  • Closure Avoidance: Use functional updates to prevent closures from referencing outdated or changing values.
  • Functional Updates Confidence: 0.85

This refined prompt provides clear guidelines for implementing Next.js projects with best practices in component architecture, state management, and code organization. Each guideline is accompanied by detailed explanations and confidence levels.

Original prompt (before our improvements)

# Next.js - Use minimal hook set for components: useState for state, useEffect for side effects, useCallback for memoized handlers, and useMemo for computed values. Confidence: 0.85 - Never make page.tsx a client component. All client-side logic lives in components under /components, and page.tsx stays a server component. Confidence: 0.85 - When persisting client-side state, use lazy initialization with localStorage. Confidence: 0.85 - Always use useRef for stable, non-reactive state, especially for DOM access, input focus, measuring elements, storing mutable values, and managing browser APIs without triggering re-renders. Confidence: 0.85 - Use sr-only classes for accessibility labels. Confidence: 0.85 - Always use shadcn/ui as the component system for Next.js projects. Confidence: 0.85 - When setting up shadcn/ui, ensure globals.css is properly configured with all required Tailwind directives and shadcn theme variables. Confidence: 0.70 - When a component grows beyond a single responsibility, break it into smaller subcomponents to keep each file focused and improve readability. Confidence: 0.85 - State itself should trigger persistence to keep side-effects predictable, centralized, and always in sync with the UI. Confidence: 0.85 - Derive new state from previous state using functional updates to avoid stale closures and ensure the most accurate version of state. Confidence: 0.85