Next.js — промпт для ChatGPT: что делает и как установить
Промпт задаёт архитектурные правила для Next.js: ограничивает набор хуков, запрещает делать page.tsx клиентским и фиксирует выбор shadcn/ui.
Открыть на GitHubЧто делает Next.js
Промпт задаёт строгие архитектурные рамки для генерации кода в Next.js. Файл page.tsx всегда остаётся серверным компонентом. Всю интерактивную логику нейросеть выносит в отдельные файлы внутри папки /components. Для интерфейса навязывается библиотека shadcn/ui, а файл globals.css обязательно снабжается директивами Tailwind и переменными тем.
В логике компонентов промпт ограничивает выбор хуков: useState для состояния, useEffect для побочных эффектов, а также useCallback и useMemo. Для нереактивных значений вроде фокуса или замеров DOM предписан useRef. Обновлять состояние требуется через функциональные апдейты, чтобы избежать замыканий со старыми данными. Сохранение в localStorage оформляется с ленивой инициализацией.
Если компонент решает больше одной задачи, модель обязана дробить его на мелкие файлы. Для подписей доступности применяются классы sr-only. Без предварительной настройки Tailwind и стилей shadcn/ui сгенерированные компоненты просто сломают проект.
Какие задачи решает
- запретить превращение
page.tsxв клиентский компонент - настроить ленивую синхронизацию состояния с
localStorage - ограничить логику стандартным набором React-хуков
- разбить перегруженные компоненты на небольшие файлы
- добавить скрытые подписи доступности через
sr-only
Примеры запросов агенту
- Создай форму профиля на Next.js с сохранением черновика в
localStorage - Напиши страницу каталога с серверным
page.tsxи фильтрами наshadcn/ui - Разбей этот крупный компонент таблицы на изолированные подкомпоненты
Как установить Next.js
Как использовать
Вставьте текст в начало диалога или в инструкции проекта
Вручную: положить файлы
.claude/commands/prompts.csv.mdВопросы о Next.js
Как установить Next.js в Claude Code?
Добавьте файл промпта по пути .claude/commands/prompts.csv.md.
Что делает этот промпт для Next.js?
Он заставляет модель генерировать серверный page.tsx, выносить клиентский код в /components и строить интерфейс на shadcn/ui. Также инструкция регламентирует вызовы хуков и обновления состояния.
Какие требования промпт предъявляет к стилям?
Промпт требует настроить файл globals.css, добавив директивы Tailwind и переменные тем shadcn/ui. Для текстовых меток доступности он предписывает использовать служебный класс sr-only.
Исходный текст
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