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

nextjs-best-practices

آمن

Aplicar Melhores Práticas do Next.js com o Claude

Desenvolvedores têm dificuldade em acompanhar os padrões do Next.js App Router e frequentemente utilizam abordagens desatualizadas. Esta skill fornece melhores práticas abrangentes para Server Components, busca de dados, roteamento e otimização de desempenho.

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

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

2

رفع في Claude

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

3

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

اختبرها

استخدام "nextjs-best-practices". Devo tornar este componente um Server ou Client Component? Ele exibe dados de perfil de usuário e tem um botão para alternar o tema.

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

Divida o componente: Crie um Server Component para buscar e exibir os dados do perfil de usuário, depois passe esses dados para um Client Component para o botão interativo de alternância de tema. Isso mantém a busca de dados no servidor (eficiente) enquanto mantém a interatividade no cliente.

استخدام "nextjs-best-practices". Como devo cachear respostas de API que mudam a cada hora?

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

Use ISR (Incremental Static Regeneration) com revalidate: 3600 (segundos). Isso cacheia a resposta por uma hora, depois regenera na próxima requisição após expirar. Para atualizações sob demanda, use revalidatePath ou revalidateTag quando sua fonte de dados atualizar.

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

آمن
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
الامتثال للمواصفات

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

Configuração de Novo Projeto Next.js

Um desenvolvedor iniciando um novo projeto Next.js deseja seguir as melhores práticas desde o início. Ele usa a skill para entender a arquitetura correta de componentes.

Refatoração de Código Legado

Uma equipe migrando do Pages Router para o App Router precisa de orientação sobre como converter buscas do lado do cliente para Server Components.

Revisão de Desempenho

Um desenvolvedor auditando uma aplicação Next.js existente usa a skill para identificar anti-padrões e oportunidades de otimização.

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

Guia de Decisão de Componente 
Devo usar um Server Component ou Client Component para um [descrição do componente] que [descrever funcionalidade]? Explique os trade-offs.
Padrão de Busca de Dados 
Qual é a melhor forma de buscar [tipo de dados] de [fonte de dados] no Next.js? Eu preciso [descrever requisitos de atualização].
Estrutura de Rotas 
Como devo organizar as rotas para [descrever seções da aplicação]? Devo usar grupos de rotas? Mostre a estrutura de arquivos.
Otimização de Desempenho 
Minha página Next.js com [descrever conteúdo] está carregando lentamente. Quais técnicas de otimização das melhores práticas devo aplicar?

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

  • Comece com Server Components por padrão - só adicione 'use client' quando precisar de interatividade como useState, useEffect, ou manipuladores de eventos
  • Busque dados em Server Components para aproveitar o caching do lado do servidor e reduzir o tamanho do bundle do cliente
  • Use arquivos loading.tsx e error.tsx para fornecer boa UX durante o carregamento de dados e tratamento graceful de erros

تجنب

  • Adicionar 'use client' em todo componente - isso anula os benefícios de desempenho dos Server Components e aumenta o tamanho do bundle
  • Buscar dados em Client Components com useEffect - isso cria requisições desnecessárias do lado do cliente e estados de carregamento
  • Pular loading.tsx e error.tsx - usuários veem telas em branco ou mensagens de erro cruas em vez de UX adequada

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

Qual é o tipo de componente padrão no Next.js App Router?
Server Components são o padrão. Você não precisa de nenhuma diretiva - componentes são do lado do servidor por padrão. Adicione 'use client' apenas quando precisar de recursos do lado do cliente.
Quando devo usar Client Components?
Use Client Components quando precisar de React hooks (useState, useEffect), manipuladores de eventos (onClick, onChange), APIs do navegador, ou bibliotecas de terceiros que dependem de renderização do lado do cliente.
Como funciona o caching de dados no Next.js?
Requisições fetch são cacheadas por padrão. Use 'no-store' para dados dinâmicos que mudam a cada requisição. Use 'revalidate' para ISR baseado em tempo. Use revalidatePath ou revalidateTag para invalidação de cache sob demanda.
O que são grupos de rotas no Next.js?
Grupos de rotas usam a sintaxe (folderName) para organizar rotas sem afetar a URL. Eles permitem aplicar layouts diferentes a seções de rotas enquanto mantêm uma estrutura de URL limpa.
Como faço tratamento de erros no Next.js App Router?
Crie error.tsx (error.ts em rotas de API) para capturar erros e exibir uma UI de recuperação. Use not-found.tsx para páginas 404. Ambos são automaticamente envolvidos por error boundaries.
Posso usar Server Actions com Client Components?
Sim. Defina Server Actions em um arquivo com 'use server', depois importe e chame-os de Client Components. A action roda no servidor enquanto o componente permanece interativo.

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

المؤلف

sickn33

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📄 SKILL.md