المهارات nextjs-best-practices
📦

nextjs-best-practices

آمن

Применение лучших практик Next.js с Claude

Разработчики испытывают трудности с поддержанием актуальности паттернов Next.js App Router и часто используют устаревшие подходы. Этот навык предоставляет комплексные лучшие практики для Server Components, выборки данных, маршрутизации и оптимизации производительности.

يدعم: Claude Codex Code(CC)
🥉 73 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "nextjs-best-practices". Должен ли я сделать этот компонент Server или Client Component? Он отображает данные профиля пользователя и имеет кнопку для переключения темы.

النتيجة المتوقعة:

Разделите компонент: создайте Server Component для получения и отображения данных профиля пользователя, затем передайте эти данные в Client Component для интерактивной кнопки переключения темы. Это сохраняет выборку данных на сервере (эффективно), сохраняя интерактивность на клиенте.

استخدام "nextjs-best-practices". Как мне кэшировать ответы API, которые меняются каждый час?

النتيجة المتوقعة:

Используйте ISR (Incremental Static Regeneration) с revalidate: 3600 (секунд). Это кэширует ответ на один час, затем пересоздает при следующем запросе после истечения срока. Для обновлений по запросу используйте revalidatePath или revalidateTag при обновлении источника данных.

التدقيق الأمني

آمن
v1 • 2/16/2026

Security evaluation complete. All static findings are false positives. The skill contains only markdown documentation about Next.js best practices. Code examples (e.g., page.tsx, revalidate: 60) are displayed in markdown code fences, not executed as shell commands. No cryptographic algorithms, network calls, or file operations are present. This is a safe reference guide for Next.js development.

1
الملفات التي تم فحصها
204
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية

الأنماط المكتشفة

False Positive: Markdown Code ExamplesFalse Positive: Weak Cryptographic Algorithm
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
83
الامتثال للمواصفات

ماذا يمكنك بناءه

Настройка нового проекта Next.js

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

Рефакторинг устаревшего кода

Команда, мигрирующая с Pages Router на App Router, нуждается в руководстве по преобразованию клиентских выборок в Server Components.

Аудит производительности

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

جرّب هذه الموجهات

Руководство по решению о компоненте 
Должен ли я использовать Server Component или Client Component для [описание компонента], который [описание функциональности]? Объясните компромиссы.
Паттерн выборки данных 
Какой лучший способ получить [тип данных] из [источник данных] в Next.js? Мне нужно [описание требований к актуальности].
Структура маршрутов 
Как мне организовать маршруты для [описание разделов приложения]? Следует ли использовать route groups? Покажите структуру файлов.
Оптимизация производительности 
Моя страница Next.js с [описание содержимого] загружается медленно. Какие техники оптимизации из лучших практик мне следует применить?

أفضل الممارسات

  • Начинайте с Server Components по умолчанию - добавляйте 'use client' только когда вам нужна интерактивность, такая как useState, useEffect или обработчики событий
  • Получайте данные в Server Components, чтобы использовать серверное кэширование и уменьшить размер клиентского бандла
  • Используйте файлы loading.tsx и error.tsx для обеспечения хорошего UX во время загрузки данных и корректной обработки ошибок

تجنب

  • Добавление 'use client' к каждому компоненту - это сводит на нет преимущества производительности Server Components и увеличивает размер бандла
  • Получение данных в Client Components с useEffect - это создает ненужные клиентские запросы и состояния загрузки
  • Пропуск loading.tsx и error.tsx - пользователи видят пустые экраны или необработанные сообщения об ошибках вместо правильного UX

الأسئلة المتكررة

Какой тип компонента используется по умолчанию в Next.js App Router?
Server Components являются стандартом по умолчанию. Вам не нужна никакая директива - компоненты по умолчанию работают на стороне сервера. Добавляйте 'use client' только когда вам нужны клиентские функции.
Когда следует использовать Client Components?
Используйте Client Components, когда вам нужны хуки React (useState, useEffect), обработчики событий (onClick, onChange), браузерные API или сторонние библиотеки, зависящие от рендеринга на стороне клиента.
Как работает кэширование данных в Next.js?
Запросы fetch кэшируются по умолчанию. Используйте 'no-store' для динамических данных, которые меняются при каждом запросе. Используйте 'revalidate' для ISR на основе времени. Используйте revalidatePath или revalidateTag для инвалидации кэша по запросу.
Что такое route groups в Next.js?
Группы маршрутов используют синтаксис (folderName) для организации маршрутов без влияния на URL. Они позволяют применять разные макеты к разделам маршрутов, сохраняя чистую структуру URL.
Как обрабатывать ошибки в Next.js App Router?
Создайте error.tsx (error.ts в API маршрутах) для перехвата ошибок и отображения UI восстановления. Используйте not-found.tsx для страниц 404. Оба автоматически оборачиваются границами ошибок.
Могу ли я использовать Server Actions с Client Components?
Да. Определите Server Actions в файле с 'use server', затем импортируйте и вызывайте их из Client Components. Action выполняется на сервере, а компонент остается интерактивным.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📄 SKILL.md