Nextjs Best Practices skill

O Claude organiza seu site em Next.js com componente no servidor por padrão, cache certo e as telas de carregamento e erro que costumam faltar.

por sickn33

instalações: 7.400
estrelas no GitHub: 48,5 mil
No skills.sh desde: janeiro de 2026
Licença: MIT

Atualizada no GitHub em 24 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

sickn33
nextjs-best-practices
O Claude organiza seu site em Next.js com componente no servidor por padrão, cache certo e as telas de carregamento e erro que costumam faltar.Auditada7.400 instalações, grátis

O que ela faz

É um resumo dos princípios do App Router do Next.js em tabelas curtas. Começa por uma árvore de decisão: se o componente usa estado, efeito ou clique, vai pro cliente; se só busca dados e mostra, fica no servidor; se precisa dos dois, vira um pai no servidor com um filho no cliente.

Cobre busca de dados e cache (force-cache, revalidate, no-store, revalidatePath e revalidateTag), os arquivos page, layout, loading, error e not-found, grupos de rota, rotas paralelas, rotas interceptadas pra abrir modal, rotas de API com validação por Zod e Server Actions com autenticação em cada ação.

Tem ainda uma tabela de erros comuns, como 'use client' em tudo e buscar dados no cliente, mais dicas de imagem com next/image, import dinâmico e metadados de SEO. Manda conferir a versão do Next.js instalada antes de seguir os conselhos de cache.

Nas palavras de quem fez

Next.js App Router principles. Server Components, data fetching, routing patterns.

sickn33, no SKILL.md

Quando usar

Começar um site ou painel novo em Next.js com App Router
Decidir o que roda no servidor e o que roda no navegador
Criar um formulário que grava dados com Server Action
Acertar title, description e imagem de compartilhamento das páginas
Revisar um projeto cheio de 'use client' que ficou pesado

Depois de instalar, é só pedir assim

Revisa as páginas do meu site Next.js e tira o 'use client' de onde não precisa
Cria a página de produtos com busca no servidor, loading.tsx e error.tsx
Faz o formulário de cadastro com Server Action e validação com Zod

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Nextjs Best Practices no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Nextjs Best Practices, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

Serve pra Next.js com a pasta pages?

Não. Os princípios são do App Router, a pasta app. O próprio texto manda conferir a versão instalada e se o Cache Components está ligado antes de aplicar as regras de cache.

Precisa de chave de API ou conta paga?

Não. São regras em texto que o Claude segue ao escrever código. Basta o projeto Next.js na sua máquina.

Roda no Codex e no Antigravity?

Sim. É um arquivo de texto só, sem script nem programa extra.

Levar essa skill

1x nextjs-best-practicesR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/sickn33/agentic-awesome-skills

Aprenda a usar

Criar site com IA: o passo a passo no Claude Code
Como eu crio site com IA pros clientes sem saber programar: no Claude Code, no Codex ou de graça no Antigravity. O passo a passo, sem cara de template.