К основному содержанию
промпт GP ChatGPT

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

Как использовать

Вставьте текст в начало диалога или в инструкции проекта

Вопросы о 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

Похожие промпты

Все промпты по теме «Фронтенд и UI» →

Из того же набора133

Весь набор →
Post-Implementation Audit Agent Role Промпт превращает модель в аудитора свежих изменений: проверяет полноту реализации, тесты, риски и готовность к релизу. GP ChatGPT ★ 174 676звёзд репо Tistory Blog Skin UI/UX Enhancement Pipeline Превращает стандартную тему блога Tistory Poster в продуманный интерфейс с индикатором чтения, плавающим оглавлением и обновлённым сайдбаром. GP ChatGPT ★ 174 676звёзд репо SQL Query Builder & Optimiser Промпт ведёт модель по семи шагам: от брифа по запросу до готового SQL с индексами и разбором плана выполнения. GP ChatGPT ★ 174 676звёзд репо Code Translator — Idiomatic, Version-Aware & Production-Ready Промпт для перевода кода между языками. Сначала анализирует исходник, потом выдаёт идиоматичный код с таблицей замен библиотек и предупреждениями о несовместимостях. GP ChatGPT ★ 174 676звёзд репо Python Unit Test Generator — Comprehensive, Coverage-Mapped & Production-Ready Промпт превращает кусок Python-кода в готовый набор юнит-тестов на pytest с картой покрытия и моками внешних зависимостей. GP ChatGPT ★ 174 676звёзд репо Python Security Vulnerability Auditor (OWASP-Mapped & Production-Hardened) Промпт для аудита Python-кода: находит уязвимости, сопоставляет их с OWASP Top 10 и выдаёт исправленную версию. GP ChatGPT ★ 174 676звёзд репо security fixes Промпт помогает устранить уязвимости в кодовой базе после проверок сканерами, сохраняя логику приложения и добавляя тесты. GP ChatGPT ★ 174 676звёзд репо Analyze code scanning security issues and dependency updates if vulnerable Промпт разбирает GHAS-алерты, ищет причины уязвимостей в зависимостях и базовых образах и помогает расставить приоритеты исправлений. GP ChatGPT ★ 174 676звёзд репо

Спонсоры проекта

Компании, которые помогают держать аналитику открытой