Next.js - Os 6 novos recursos da versão 12

Next.js anunciou em sua conferência Next.js que o Next.js 12 será um de seus maiores lançamentos de todos os tempos. Então, neste artigo, vamos ver rapidamente quais são os novos recursos incríveis que o Next.js 12 tem para nos fornecer, existem aproximadamente 6 novos recursos que o Next.js 12 trouxe, e vamos analisar todos eles.

1º) Compilador Rust

Você realmente não precisa saber muito sobre Rust, mas o que você deve saber é que o Next.js 12 está usando o Rust Compiler para fornecer compilações e atualizações 5x mais rápidas, que anteriormente era 3x a velocidade. Isso significa que o desempenho aumentou quase duas vezes.

2º) Middlewares

O middleware permite que você use o código sobre a configuração. Isso oferece total flexibilidade no Next.js porque você pode executar o código antes que uma solicitação seja concluída. Com base na solicitação recebida do usuário, você pode modificar a resposta reescrevendo, redirecionando, adicionando cabeçalhos ou até mesmo transmitindo HTML.

3º) React 18

Já devemos ter ouvido falar sobre o React 18 e seus recursos incríveis, como suspense, lote automático de atualizações, API's como startTransition, e uma nova API de streaming para renderização de servidor com suporte para React.lazy. O Next.js 12 também adicionará esses recursos.

4º) Imagens menores usando AVIF

A API de otimização de imagem integrada agora suporta imagens AVIF, permitindo imagens 20% menores em comparação com WebP.
As imagens AVIF podem demorar mais para serem otimizadas em comparação com o WebP, por isso estamos ativando esse recurso usando a nova images.formats propriedade em next.config.js:

module.exports = { 
  images: { 
    formats: ['imagem/avif', 'imagem/webp'] 
  } 
}

5º) Fallback de ISR com reconhecimento de bot

Atualmente, a Regeneração Estática Incremental com fallback: true renderiza um estado de fallback antes de renderizar o conteúdo da página na primeira solicitação para uma página que ainda não foi gerada. Para bloquear o carregamento da página (renderização do servidor), você precisaria usar fallback: 'blocking'.

No Next.js 12, os rastreadores da Web (por exemplo, bots de pesquisa) renderizarão automaticamente as páginas ISR do servidor usando fallback: true, enquanto ainda atendem ao comportamento anterior do estado de fallback para User-Agents não rastreadores. Isso impede que os rastreadores indexem os estados de carregamento.

6º) Importações de URL

As importações de URL permitem que você use qualquer pacote diretamente por meio de um URL. Isso permite que o Next.js processe recursos HTTP(S) remotos exatamente como dependências locais. Se uma importação de URL for detectada, o Next.js gerará um next.lock arquivo para rastrear recursos remotos. As importações de URL são armazenadas em cache localmente para garantir que você ainda possa trabalhar offline. O Next.js oferece suporte a importações de URL de cliente e servidor. Para aceitar, adicione os prefixos de URL permitidos dentro de next.config.js:

module.exports = { 
  experimental: { 
    urlImports: ['https://cdn.skypack.dev'] 
  } 
}

Em seguida, você pode importar módulos diretamente de URLs:

import confetti from 'https://cdn.skypack.dev/canvas-confetti'

Aqui estão os 6 novos recursos do Next.js, mas sempre esteja atualizado com a documentação do Next.js para quaisquer outras atualizações mais recentes também.

Fontes onde pesquisei esse conteúdo:

• https://nextjs.org/blog/next-12