Communitygithub.com

junksidetm/darkside-toolkit

Orientação sobre Next.js 16+ e Turbopack — bundling incremental em Rust, cache do sistema de arquivos, inicialização de desenvolvimento e HMR mais rápidos, compensações entre Turbopack e webpack, e a mudança de nome de middleware.ts para proxy.ts. Use ao desenvolver ou depurar aplicações Next.js 16+, diagnosticar inicialização lenta ou hot reload, escolher entre bundlers ou revisar nomenclatura de arquivos middleware/proxy.

O que é darkside-toolkit?

Essa habilidade fornece orientação técnica completa para desenvolvedores que trabalham com Next.js 16+ e Turbopack, o bundler incremental em Rust que substitui o webpack como padrão para desenvolvimento local. Ela explica quando usar Turbopack (padrão) versus webpack (legado), descreve como o cache do sistema de arquivos acelera restart e HMR, e oferece exemplos de comandos como `next dev`, `next build` e `next start`. Também aborda a mudança de nomenclatura de middleware.ts para proxy.ts no Next.js 16+, evitando que o arquivo seja confundido ou renomeado incorretamente. Inclui boas práticas como manter-se em uma versão recente do Next.js 16.x, usar o Bundle Analyzer experimental para otimizar bundles e evitar limpar o cache desnecessariamente. A habilidade é útil para desenvolvedores diagnosticando lentidão no ciclo de desenvolvimento, otimizando produção ou migrando entre versões do Next.js.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/junksidetm/darkside-toolkit/tree/HEAD/skills/nextjs-turbopack

Perguntar na sua IA favorita

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

Documentação

Next.js e Turbopack

Next.js 16+ usa Turbopack por padrão para desenvolvimento local: um bundler incremental escrito em Rust que acelera significativamente a inicialização do dev e as atualizações a quente.

Quando Usar

  • Turbopack (dev padrão): Use para o desenvolvimento diário. Inicialização a frio e HMR mais rápidos, especialmente em aplicações grandes.
  • Webpack (dev legado): Use apenas se encontrar um bug no Turbopack ou depender de um plugin exclusivo do webpack em dev. Desabilite com --webpack (ou --no-turbopack dependendo da sua versão do Next.js; consulte a documentação da sua versão).
  • Produção: O comportamento de build de produção (next build) pode usar Turbopack ou webpack dependendo da versão do Next.js; consulte a documentação oficial do Next.js para sua versão.

Use quando: estiver desenvolvendo ou depurando aplicações Next.js 16+, diagnosticando inicialização lenta do dev ou HMR, ou otimizando bundles de produção.

Como Funciona

  • Turbopack: Bundler incremental para o dev do Next.js. Usa cache do sistema de arquivos para que as reinicializações sejam muito mais rápidas (ex.: 5–14x em projetos grandes).
  • Padrão no dev: A partir do Next.js 16, next dev executa com Turbopack a menos que desabilitado.
  • Cache do sistema de arquivos: Reinicializações reutilizam trabalho anterior; o cache fica tipicamente em .next; nenhuma configuração extra é necessária para uso básico.
  • Bundle Analyzer (Next.js 16.1+): Bundle Analyzer experimental para inspecionar a saída e encontrar dependências pesadas; ative via configuração ou flag experimental (consulte a documentação do Next.js para sua versão).

Exemplos

Comandos

next dev
next build
next start

Uso

Execute next dev para desenvolvimento local com Turbopack. Use o Bundle Analyzer (consulte a documentação do Next.js) para otimizar code-splitting e aparar dependências grandes. Prefira App Router e componentes de servidor quando possível.

Nomenclatura do Arquivo Middleware

O Next.js 16 introduziu proxy.ts como o nome do arquivo middleware, substituindo a convenção anterior middleware.ts:

  • Next.js 16+: use proxy.ts na raiz do projeto
  • Pré-Next.js 16: use middleware.ts na raiz do projeto

A mudança de nome está vinculada à versão do Next.js, não a qual bundler (Turbopack ou webpack) está em uso. Verifique sempre a documentação oficial para a versão que você está revisando.

Não sinalize proxy.ts como um arquivo middleware mal nomeado ou ausente em projetos Next.js 16. O arquivo está correto e é intencional. Sugerir uma renomeação para middleware.ts quebrará a execução do middleware.

Referência: Documentação do proxy no Next.js

Boas Práticas

  • Mantenha-se em uma versão recente do Next.js 16.x para comportamento estável do Turbopack e do cache.
  • Se o dev estiver lento, certifique-se de que está usando Turbopack (padrão) e que o cache não está sendo limpo desnecessariamente.
  • Para problemas de tamanho de bundle em produção, use as ferramentas oficiais de análise de bundle do Next.js para sua versão.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

Habilidades Relacionadas