next-best-practices
Разработка готовых к продакшену приложений на Next.js
Перестаньте гадать о шаблонах Next.js и пишите масштабируемый код. Этот навык предоставляет авторитетные рекомендации от Vercel об оформлении файлов, React Server Components, получении данных, обработке ошибок и лучших практиках развертывания.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“next-best-practices”。 Должен ли я использовать 'use client' в этом компоненте?
预期结果:
Исходя из вашего кода, здесь вам НЕ нужно использовать 'use client'. Этот компонент получает данные только через props и рендерит JSX без каких-либо браузерных API. Добавление 'use client' неоправданно увеличит размер клиентского бандла.
Оставьте его как Server Component, если вам не нужны:
- useState, useEffect или другие React hooks
- Браузерные API вроде window или document
- Обработчики событий вроде onClick
- Получение данных на стороне клиента
正在使用“next-best-practices”。 Проверьте мое использование async params
预期结果:
Ваш тип params неверен для Next.js 15+. Обновите его до:
type Props = {
params: Promise<{ slug: string }>
}
export default async function Page({ params }: Props) {
const { slug } = await params
// ...
}
Свойство params теперь является Promise, который необходимо ожидать. Это изменение включает частичное предварительное рендеринг и улучшает производительность.
正在使用“next-best-practices”。 Как исправить эту ошибку гидратации?
预期结果:
Ваша ошибка гидратации вызвана использованием Date.now() в компоненте. Сервер и клиент рендерят разные метки времени.
Решения:
1. Используйте 'use client', если отображение даты не критично для SEO
2. Используйте suppressHydrationWarning для меток времени
3. Отображайте дату только на клиенте с useEffect
Пример исправления:
const [date, setDate] = useState<string>()
useEffect(() => setDate(new Date().toISOString()), [])
Это гарантирует, что дата отображается только на клиенте.
安全审计
安全All 790 static analysis findings are false positives. The skill contains only documentation and code examples for Next.js best practices. Pattern matches for 'external commands' are Markdown code blocks, 'network' findings are documentation URLs, and 'env_access' references are standard configuration examples. No executable code or security risks detected.
质量评分
你能构建什么
Проверка новых проектов Next.js
Убедитесь, что структура вашего проекта соответствует официальным соглашениям с первого дня. Проверьте организацию файлов, сегменты маршрутов и использование специальных файлов.
Миграция на App Router
Получите пошаговое руководство по преобразованию кода из Pages Router в App Router с надлежащими Server Components, асинхронными шаблонами и получением данных.
Отладка проблем в продакшене
Устраните ошибки гидратации, проблемы сборки и конфигурации развертывания с проверенными решениями от Vercel.
试试这些提示
Проверьте структуру моего проекта Next.js и идентифицируйте любые файлы, которые не следуют соглашениям App Router. Проверьте правильное использование layout.tsx, page.tsx, loading.tsx, error.tsx и групп маршрутов.
У меня возникают ошибки с React Server Components. Проверьте этот код и сообщите, правильно ли я использую async/await для params, cookies или заголовков. Также проверьте, случайно ли я использую только клиентские API в серверных компонентах.
Проверьте мои шаблоны получения данных и идентифицируйте любые водопады. Покажите, как использовать Promise.all, границы Suspense или паттерны предварительной загрузки для улучшения производительности.
Помогите мне настроить мое приложение Next.js для собственного хостинга с Docker. Мне нужен автономный вывод, настройка обработчика кэша для ISR и конфигурация переменных окружения.
最佳实践
- Всегда типизируйте params и searchParams как Promise<T> в Next.js 15+ и ожидайте их в Server Components
- Используйте динамические импорты с ssr: false для пакетов только для браузера, чтобы предотвратить ошибки на стороне сервера
- Реализуйте границы loading.tsx и error.tsx для улучшения пользовательского опыта во время получения данных и состояний ошибок
- Настройте output: 'standalone' в next.config.js для развертываний Docker для минимизации размера изображения
- Используйте next/image вместо тегов img для автоматической оптимизации и улучшения Core Web Vitals
避免
- Не используйте 'use client' без необходимости — Server Components снижают количество JavaScript, отправляемого в браузер
- Избегайте последовательного получения данных во вложенных компонентах — используйте Promise.all или Suspense для предотвращения водопадов
- Никогда не используйте префикс NEXT_PUBLIC_ для секретов — они раскрываются в бандле браузера
- Не используйте теги Link для CSS — импортируйте CSS-файлы напрямую для правильной сборки
- Избегайте пользовательской конфигурации webpack — предпочитайте serverExternalPackages и transpilePackages, совместимые с Turbopack