CommunityEscrita e Ediçãogithub.com

Next.js App Router (Claude Skill)

Construa, revise ou migre aplicações Next.js App Router com componentes conscientes de versão, busca de dados, cache, roteamento e mutações. Use para implementação e arquitetura do App Router, não para otimização genérica de React, edições de cópia ou correções do Pages Router que não envolvam migração.

O que é Next.js App Router (Claude Skill)?

Esta skill especializa-se em auxiliar desenvolvedores a trabalhar com o Next.js App Router de forma eficiente e correta, considerando a versão e configuração suportadas da aplicação. Ela fornece diretrizes para estabelecer o contexto do projeto, como inspecionar dependências e configurações, e orienta a escolha de recursos específicos para tarefas como definição de limites servidor/cliente, busca de dados, cache, roteamento, tratamento de erros e migração do Pages Router. A skill prioriza decisões críticas, como proteger segredos e dados do usuário, preservar a correção entre versões e modos de renderização, remover gargalos de desempenho (waterfalls) e código cliente desnecessário, e ajustar cache e prefetching para o frescor e comportamento de implantação. Ela também enfatiza a validação prática das mudanças através de typecheck, lint e testes comportamentais. Esta skill é ideal para tarefas de implementação e arquitetura no App Router, sendo compatível com ferramentas de IA como Claude Code, Cursor e Codex. O conteúdo é baseado na documentação oficial SKILL.md e recursos técnicos relacionados ao Next.js.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/LeahyCC/claude-skills/tree/HEAD/skills/nextjs-app-router

Installed? Explore more Escrita e Edição skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Next.js App Router

Preserve a versão e configuração suportada da aplicação. Prefira renderização no servidor e leituras diretas do servidor quando adequado; mantenha comportamento interativo e ao vivo do navegador onde necessário.

Estabeleça o contexto

Inspecione package.json, o arquivo de lock, pastas de rotas, next.config.* e instruções do projeto. Identifique as versões instaladas do Next.js/React, App vs Pages Router, restrições de runtime/deploy e se Cache Components está habilitado. Em monorepos, resolva essas informações a partir da aplicação afetada. Não faça upgrade de pacotes ou habilite recursos apenas para se adequar a um exemplo.

Prefira documentação correspondente à versão que está em node_modules/next/dist/docs/ no Next.js 16.2+, quando disponível. Caso contrário, consulte a documentação oficial para a versão suportada. A documentação ao vivo pode descrever uma versão minor mais nova; confirme o histórico da versão da API e a configuração antes de usar. Distinga APIs estáveis, opções experimentais, depreciações e convenções do projeto.

Escolha o recurso relevante

Leia apenas os recursos necessários para a tarefa; siga seus links oficiais quando uma versão ou comportamento for incerto.

TarefaRecurso
Limites servidor/cliente, composição, serializaçãoServer Components
Leituras, streaming, dados do navegador, ações, endpoints HTTPData fetching
Modo de cache existente, Cache Components, cache privado/remoto, invalidaçãoCaching
Layouts, rotas dinâmicas, busca, rotas paralelas/de interceptaçãoRouting
Redirecionamentos/reescritas de requisição e gates de autenticação otimistasProxy
Erros esperados, carregamento, recuperação, semântica de resposta 404Error handling
Exportações de metadados, herança e integração com SEOMetadata
Configuração de imagem/fonte e tradeoffs de carregamentoAssets
Migração incremental de Pages para AppMigration
Upgrades deliberados de major/minorVersion changes

Priorize decisões

  1. Proteja segredos e dados do usuário. Autentique e autorize leituras/mutações perto dos dados, valide entrada não confiável e mantenha dados pessoais fora de um cache compartilhado incorretamente. Proxy e visibilidade de UI não são autorização suficiente.
  2. Preserve a correção entre versões e modos de renderização. APIs de requisição assíncronas, pré-requisitos de cache, convenções de rota e props de recuperação dependem da versão/configuração instalada.
  3. Remova waterfalls demonstrados e código cliente desnecessário. Paralelize trabalho independente; escolha limites de Suspense que preservem uma UI útil. Busca no cliente permanece apropriada para polling, estado apenas do navegador e atualizações interativas.
  4. Ajuste cache, prefetch e dicas de ativos para frescor, implantação e comportamento medido. Essas são escolhas, não pré-requisitos para toda aplicação App Router.

Use Server Components para trabalho exclusivo do servidor. Adicione 'use client' em um limite de módulo útil para interação; não precisa ser uma folha. Use uma Server Action para mutações de UI quando apropriado, ou um Route Handler para um contrato HTTP (incluindo clientes de navegador). Nenhum substitui autorização.

Valide a mudança real

Execute os comandos de typecheck, lint e build existentes da aplicação afetada, quando disponíveis. Teste o comportamento que pode falhar: requisições diretas autenticadas, isolamento entre usuários, frescor pós-mutação, navegação hard/soft, erros e carregamento. Não considere um trecho pronto para produção quando imports, helpers de autenticação ou persistência forem placeholders. Informe o que foi executado e o que permanece não testado.

Para revisões, lidere com falhas acionáveis e seu escopo de versão/configuração. Separe melhorias opcionais de problemas de correção. Para implementação, explique o limite/modo de cache escolhido, o comportamento alterado e a verificação.

A revisão de fonte é focada, não uma certificação genérica. Veja SOURCES.md para links canônicos, versões/configurações aplicáveis, seções verificadas, datas upstream e a política de frescor. Os registros de revisão/avaliação piloto do repositório são evidências de manutenção e não são necessários em tempo de execução.

Habilidades Relacionadas