Skip to main content
Prompts Next.js Best Practices Guidelines

developer coding developer risk: low

Next.js Best Practices Guidelines

Provides a list of rules for Next.js development covering hooks usage, component structure, state management, persistence, accessibility, shadcn/ui setup, and code organization, ea…

PROMPT 

# 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

ROLES & RULES

  1. Use minimal hook set for components: useState for state, useEffect for side effects, useCallback for memoized handlers, and useMemo for computed values.
  2. Never make page.tsx a client component. All client-side logic lives in components under /components, and page.tsx stays a server component.
  3. When persisting client-side state, use lazy initialization with localStorage.
  4. 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.
  5. Use sr-only classes for accessibility labels.
  6. Always use shadcn/ui as the component system for Next.js projects.
  7. When setting up shadcn/ui, ensure globals.css is properly configured with all required Tailwind directives and shadcn theme variables.
  8. When a component grows beyond a single responsibility, break it into smaller subcomponents to keep each file focused and improve readability.
  9. State itself should trigger persistence to keep side-effects predictable, centralized, and always in sync with the UI.
  10. Derive new state from previous state using functional updates to avoid stale closures and ensure the most accurate version of state.

EXPECTED OUTPUT

Format
markdown

CAVEATS

Missing context
  • Next.js and React version compatibility
  • Examples or code snippets for rules
  • Integration instructions (e.g., 'Use these as a system prompt for code generation')

QUALITY

OVERALL
0.85
CLARITY
0.95
SPECIFICITY
0.90
REUSABILITY
0.85
COMPLETENESS
0.75

IMPROVEMENT SUGGESTIONS

  • Prefix with a clear directive like 'Strictly adhere to these Next.js best practices when generating or reviewing code:' to define usage.
  • Group rules into categories (e.g., Hooks, Components, State Management) for better scannability.
  • Replace or explain confidence scores, e.g., convert to enforcement levels like 'Mandatory' or 'Recommended'.
  • Add placeholders for customization, e.g., '{additional_rules}' or '{project_context}'.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER