next-best-practices

Visão Geral

O que é next-best-practices?

next-best-practices é uma skill abrangente para desenvolvedores frontend que trabalham com Next.js. Ela oferece práticas recomendadas e padrões acionáveis para construir aplicações Next.js escaláveis e fáceis de manter. Cobrindo desde convenções de arquivos e limites de React Server Components (RSC) até padrões assíncronos de dados, tratamento de erros e otimização, esta skill ajuda a evitar armadilhas comuns e adotar fluxos de trabalho modernos do Next.js.

Para quem esta skill é indicada?

• Desenvolvedores frontend que usam Next.js e React
• Equipes migrando para o App Router do Next.js
• Qualquer pessoa que queira aplicar ou aprender as convenções atualizadas do Next.js

Quais problemas ela resolve?

• Esclarece a estrutura de arquivos e pastas para projetos Next.js grandes
• Guia o uso correto de Server e Client Components
• Explica padrões assíncronos de dados e migração para Next.js 15+
• Ajuda a evitar erros comuns de bundling e em tempo de execução
• Fornece estratégias robustas de tratamento de erros e depuração

Quando usar next-best-practices?

• Ao iniciar um novo projeto Next.js ou refatorar um existente
• Ao integrar novos membros da equipe às convenções do Next.js
• Ao solucionar problemas de busca de dados, roteamento ou bundling

Como Usar

Passos para Instalação

1. Adicione a skill ao seu projeto usando:

   npx skills add https://github.com/vercel-labs/next-skills --skill next-best-practices
   

2. Abra o arquivo SKILL.md para um resumo geral e links para guias detalhados.
3. Revise os arquivos de suporte para tópicos específicos:
   • file-conventions.md: Aprenda sobre estrutura de projeto, segmentos de rota e arquivos especiais.
   • rsc-boundaries.md: Entenda padrões válidos e inválidos de React Server Components.
   • async-patterns.md: Migre para as novas APIs assíncronas para params, cookies e headers.
   • data-patterns.md: Escolha as estratégias corretas para busca e mutação de dados.
   • error-handling.md: Implemente limites de erro e trate exceções de navegação.
   • bundling.md: Corrija problemas de bundling com pacotes de terceiros.
   • directives.md: Use diretivas do React e Next.js como 'use client', 'use server' e 'use cache'.
   • debug-tricks.md: Acelere a depuração com ferramentas de desenvolvimento Next.js e endpoints.

Adaptando ao Seu Projeto

• Use os padrões fornecidos como referência e adapte-os ao seu repositório, ferramentas e ambiente de implantação.
• Não copie o código literalmente — revise cada padrão para garantir compatibilidade com sua stack e versão do Next.js.

Principais Tópicos Abordados

• Convenções de arquivos e estrutura do projeto
• Limites de RSC e padrões de componentes
• Busca assíncrona de dados e migração
• Manipuladores de rota e seleção de runtime
• Limites de erro e tratamento global de erros
• Otimização de imagens e fontes
• Bundling e externalização de dependências
• Depuração e ferramentas de desenvolvimento

Perguntas Frequentes

Como faço para visualizar o conteúdo do next-best-practices?

Após a instalação, abra a aba Files para navegar por todos os guias incluídos, como SKILL.md, async-patterns.md, bundling.md e outros. Cada arquivo foca em uma prática recomendada específica do Next.js.

next-best-practices é específico para alguma versão do Next.js?

A skill está atualizada para Next.js 15+ e cobre passos de migração para as novas APIs assíncronas e convenções. Alguns padrões podem não se aplicar a versões mais antigas.

Posso usar next-best-practices com configurações personalizadas?

Sim, mas revise cada padrão para garantir compatibilidade com suas configurações personalizadas, especialmente em roteamento, runtimes de servidor e bundling.

E se eu precisar de mais detalhes sobre um tópico específico?

Cada arquivo de tópico contém exemplos práticos e referências à documentação oficial do Next.js ou React para aprofundamento.

Onde posso obter ajuda se encontrar problemas?

Consulte o debug-tricks.md para dicas avançadas de depuração ou a documentação oficial do Next.js vinculada nos arquivos da skill.