Навыки nextjs-best-practices
📦

nextjs-best-practices

Безопасно

Освойте лучшие практики Next.js App Router

Создавайте готовые к производству приложения Next.js с уверенностью. Изучите серверные компоненты, стратегии получения данных и масштабируемые паттерны маршрутизации.

Поддерживает: Claude Codex Code(CC)
📊 71 Адекватно
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «nextjs-best-practices». Можно ли использовать useState в серверном компоненте?

Ожидаемый результат:

Нет. Серверные компоненты не могут использовать useState, useEffect или обработчики событий. Эти хуки требуют браузерный JavaScript. Если вам нужно состояние, отметьте компонент 'use client' или извлеките интерактивные части в отдельный клиентский компонент.

Использование «nextjs-best-practices». Как кешировать API-ответы в Next.js?

Ожидаемый результат:

Используйте опции fetch: fetch(url, { next: { revalidate: 60 } }) кеширует на 60 секунд. Для статического контента опустите revalidate для кеширования во время сборки. Используйте 'no-store' для полного отключения кеширования.

Использование «nextjs-best-practices». Для чего нужен loading.tsx?

Ожидаемый результат:

loading.tsx предоставляет автоматические состояния загрузки во время навигации и получения данных. Он отображается во время загрузки нового сегмента, улучшая воспринимаемую производительность. Разместите его рядом с page.tsx в любом сегменте маршрута.

Аудит безопасности

Безопасно
v2 • 2/24/2026

This skill is documentation-only content describing Next.js App Router best practices. Static analysis flagged 18 patterns (external_commands, weak cryptographic algorithms), but all are FALSE POSITIVES. The SKILL.md file contains only educational markdown content with code examples - no executable code, no shell commands, no cryptographic operations. Safe for publication.

1
Просканировано файлов
209
Проанализировано строк
0
находки
2
Всего аудитов
Проблем безопасности не найдено
Проверено: claude Посмотреть историю аудитов →

Оценка качества

38
Архитектура
100
Сопровождаемость
87
Контент
31
Сообщество
100
Безопасность
91
Соответствие спецификации

Что вы можете построить

Миграция с Pages на App Router

Переход существующих проектов Next.js на архитектуру App Router с правильными паттернами серверных компонентов.

Создание новых приложений Next.js

Начните новые проекты с правильной структуры папок, стратегий кеширования и архитектуры компонентов с первого дня.

Проверка кода и оптимизация

Аудит существующих кодовых баз на антипаттерны, такие как ненужные клиентские компоненты или отсутствующие состояния загрузки.

Попробуйте эти промпты

Решение о типе компонента 
У меня есть компонент, который отображает данные профиля пользователя и имеет кнопку подписки. Это должен быть серверный компонент или клиентский компонент? Объясните рассуждения.
Стратегия получения данных 
Какой рекомендуемый паттерн получения данных для отображения списка товаров, который должен обновляться каждые 5 минут? Покажите реализацию.
Организация маршрутов 
Как организовать панель мониторинга с несколькими разделами (аналитика, настройки, пользователи), которые используют общий макет, но не должны влиять на структуру URL?
Полная реализация функции 
Создайте форму комментариев с использованием серверных действий. Включите валидацию ввода с Zod, оптимистичные обновления UI и обработку ошибок. Покажите код как серверного, так и клиентского компонента.

Лучшие практики

  • Начинайте с серверных компонентов по умолчанию, добавляйте клиентские компоненты только при необходимости интерактивности
  • Используйте группы маршрутов с круглыми скобками для организации маршрутов без влияния на путь URL
  • Реализуйте loading.tsx и error.tsx для каждого основного сегмента маршрута для обработки состояний ожидания и ошибок

Избегать

  • Добавление 'use client' к каждому компоненту - это сводит на нет цель серверных компонентов и увеличивает размер бандла
  • Получение данных в клиентских компонентах вместо серверных - вызывает каскадные запросы и замедляет загрузку
  • Пропуск правильных границ ошибок - необработанные ошибки крашат все приложение вместо отображения резервного UI

Часто задаваемые вопросы

Когда следует использовать серверные компоненты против клиентских?
Используйте серверные компоненты по умолчанию для получения данных, макетов и статического контента. Испуользуйте клиентские компоненты только когда вам нужны useState, useEffect, обработчики событий или браузерные API. Разделяйте крупные компоненты, чтобы минимизировать клиентские части.
Как работает кеширование в App Router?
Next.js кеширует fetch-запросы по умолчанию. Используйте revalidate для временной ревалидации (ISR), revalidatePath или revalidateTag для обновлений по требованию, и no-store для отключения кеширования. Каждый сегмент маршрута также может иметь собственную конфигурацию кеширования.
Что такое серверные действия и когда их следует использовать?
Серверные действия - это асинхронные функции, помеченные 'use server', которые выполняются на сервере. Используйте их для отправки форм, мутаций данных и триггера ревалидации. Всегда валидируйте входные данные и правильно обрабатывайте ошибки.
Как обрабатывать аутентификацию в App Router?
Проверяйте аутентификацию в серверных компонентах перед рендерингом защищенного контента. Используйте middleware для защиты на уровне маршрутов. Для клиентских компонентов получайте статус аутентификации из серверного компонента или используйте провайдер аутентификации на стороне клиента.
В чем разница между layout.tsx и template.tsx?
layout.tsx сохраняется между навигациями и поддерживает состояние. template.tsx создает новый экземпляр при каждой навигации, монтируя заново дочерние элементы. Используйте layout для постоянного UI, такого как навигация, template когда вам нужно поведение сброса.
Можно ли использовать API-маршруты с App Router?
Да. Создайте файлы route.ts в директории app с обработчиками GET, POST, PUT, PATCH, DELETE. Используйте Route Handlers для API-эндпоинтов. Рассмотрите Edge runtime для лучшей производительности на простых эндпоинтах.

Сведения для разработчиков

Автор

sickn33

Лицензия

MIT

Репозиторий

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-best-practices

Ссылка

main

Структура файлов

📄 SKILL.md