Next.js — ChatGPT prompt: what it does, how to install
Enforces Next.js conventions by restricting React hooks, keeping page.tsx on the server, and setting shadcn/ui as the default UI system.
Open on GitHubWhat Next.js does
This prompt sets direct architectural boundaries for Next.js code generation. It forbids making page.tsx a client component, pushing all interactive logic into subcomponents inside /components. The instructions also establish shadcn/ui as the required design system, requiring globals.css to contain theme variables and Tailwind directives.
Component state management follows strict rules. The model uses a minimal hook footprint: useState, useEffect, useCallback, and useMemo. Persistent client state requires lazy initialization through localStorage. For non-reactive tasks like input focus or DOM measurements, the rules mandate useRef to prevent unnecessary re-renders. Functional updates are compulsory to avoid stale state closures.
Whenever a component exceeds a single responsibility, the agent must split it into smaller files. Accessibility labels rely on sr-only utility classes. Without Tailwind and shadcn/ui configured in your workspace, the generated components will fail to build.
What it helps with
- keep
page.tsxas a pure server component - enforce lazy initialization for
localStoragestate - restrict component logic to a minimal hook set
- break oversized components into focused subcomponents
- implement accessible labels using
sr-onlyclasses
Example prompts for the agent
- Build a settings form in Next.js that saves drafts to
localStorage - Create a product page with a server
page.tsxand interactiveshadcn/uifilters - Refactor this dashboard component into smaller single-responsibility subcomponents
How to install Next.js
How to use
Paste the text at the start of a chat or into project instructions
Manually: put the files in place
.claude/commands/prompts.csv.mdQuestions about Next.js
How to install Next.js in Claude Code?
Place the prompt file at .claude/commands/prompts.csv.md.
What does the Next.js prompt do?
It directs ChatGPT to keep page.tsx on the server, move client code into /components, and build interfaces with shadcn/ui. It also standardizes hook usage and functional state updates.
Which UI library does this prompt require?
It specifies shadcn/ui as the component system. It also mandates configuring globals.css with required Tailwind directives and theme variables.
Source text
prompts.csv · CC0-1.0
# 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
© arre-ankit · CC0-1.0 · f/prompts.chat
