技能 next-js-patterns
🟢

next-js-patterns

安全 🌐 網路存取📁 檔案系統存取⚙️ 外部命令

Aplicar padrões do Next.js App Router

Obtenha as melhores práticas para Next.js 15 App Router, incluindo Server Components, layouts e padrões de navegação. Construa aplicações React modernas com arquitetura adequada.

支援: Claude Codex Code(CC)
📊 70 充足
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「next-js-patterns」。 How do I create a new dashboard page?

預期結果:

  • 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」。 When should I use Server Components vs Client Components?

預期結果:

  • 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

安全審計

安全
v5 • 1/16/2026

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
已掃描檔案
222
分析行數
3
發現項
5
審計總數
審計者: claude 查看審計歷史 →

品質評分

38
架構
100
可維護性
85
內容
30
社群
100
安全
83
規範符合性

你能建構什麼

Aprender fundamentos do App Router

Entenda layouts de páginas, tipos de componentes e navegação no Next.js 15

Aplicar padrões de dados no servidor

Busque dados em Server Components e gerencie necessidades de dados no lado do cliente

Estruturar projetos Next.js

Projete layouts de rotas adequados, metadados e otimização de fontes

試試這些提示

Configuração básica de página
Mostre-me como criar uma nova página no Next.js App Router com estrutura adequada de Server Component
Interação com cliente
Como criar um Client Component no Next.js App Router para gerenciamento de estado
Fluxo de navegação
Qual é a diferença entre Link e useRouter para navegação no Next.js
Busca de dados
Mostre as melhores práticas para buscar dados em Server Components versus Client Components

最佳實務

  • Priorize Server Components por padrão para melhor desempenho e segurança
  • Use Link de next/link para todos os links de navegação interna
  • Mantenha a lógica do lado do cliente em componentes separados com diretiva use client
  • Defina metadados no nível da página ou layout para otimização de SEO

避免

  • Evite usar useRouter quando o componente Link seria suficiente
  • Não transforme todos os componentes em Client Components desnecessariamente
  • Evite buscar dados em Client Components quando Server Components podem lidar com isso

常見問題

Quais versões do Next.js suportam App Router?
Next.js 13 e versões posteriores suportam o App Router. Esta skill foca nos padrões do Next.js 15.
Qual é o número máximo de rotas aninhadas suportadas?
Next.js suporta aninhamento profundo. Os limites práticos dependem da complexidade do projeto e da organização dos arquivos.
Como integro isso com projetos existentes?
Aplique padrões em novas rotas no diretório app. App Router pode coexistir com o diretório pages.
Esta skill acessa dados externos?
Não. Esta skill apenas fornece documentação. Nenhum dado é lido, escrito ou transmitido.
Por que minha página não está atualizando com a navegação?
Certifique-se de estar usando Link para navegação. Client Components usando useRouter devem ser envolvidos corretamente.
Como isso se compara ao pages router?
App Router oferece Server Components por padrão, layouts aninhados e streaming. O pages router ainda é suportado.

開發者詳情

檔案結構

📄 SKILL.md