next-js-patterns
Применить паттерны Next.js App Router
Получите лучшие практики для Next.js 15 App Router, включая серверные компоненты, макеты и паттерны навигации. Создавайте современные React-приложения с правильной архитектурой.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“next-js-patterns”。 Как создать новую страницу панели мониторинга?
预期结果:
- Create app/dashboard/page.tsx
- Export default function as Server Component by default
- Use use client directive only for state or effects
- Add Link components for internal navigation
- Export metadata for SEO
正在使用“next-js-patterns”。 Когда использовать серверные компоненты против клиентских?
预期结果:
- Use Server Components by default for better performance
- Use Client Components when you need useState or useEffect
- Use Client Components for event handlers and browser APIs
- Keep client-side logic in separate components
安全审计
安全Pure documentation skill containing markdown documentation for Next.js patterns. No executable code, network calls, or file system access. The static analyzer flagged JSON string patterns as cryptographic/network threats, but these are metadata fields in a configuration file. This skill only provides guidance documentation.
风险因素
🌐 网络访问 (2)
📁 文件系统访问 (1)
质量评分
你能构建什么
Изучить основы App Router
Понять макеты страниц, типы компонентов и навигацию в Next.js 15
Применить паттерны серверных данных
Получать данные в серверных компонентах и обрабатывать потребности в данных на стороне клиента
Структурировать проекты Next.js
Проектировать правильные макеты маршрутов, метаданные и оптимизацию шрифтов
试试这些提示
Покажите, как создать новую страницу в Next.js App Router с правильной структурой серверного компонента
Как создать клиентский компонент в Next.js App Router для управления состоянием
В чем разница между Link и useRouter для навигации в Next.js
Покажите лучшие практики для получения данных в серверных компонентах по сравнению с клиентскими компонентами
最佳实践
- По умолчанию используйте серверные компоненты для лучшей производительности и безопасности
- Используйте Link из next/link для всех ссылок внутренней навигации
- Храните логику на стороне клиента в отдельных компонентах с директивой use client
- Определяйте метаданные на уровне страницы или макета для оптимизации SEO
避免
- Избегайте использования useRouter, когда компонент Link достаточен
- Не делайте все компоненты клиентскими без необходимости
- Избегайте получения данных в клиентских компонентах, когда серверные компоненты могут это обработать