Next.js - Os 6 novos recursos da versão 12
Tags: javascript, programming, news, nextjs
Published: 2022-02-25 13:52:35

![Next](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58jjw8m4pwqwszzbvkmk.png)
 
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.
![Faster](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfh7i6533diujljsnwga.png)
 
### 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.

![Middleware](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hww12sq4wnvfhroyt4yn.png)

### 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`:

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

### 5º) Fallback de ISR com reconhecimento de bot

Atualmente, a [Regeneração Estática Incremental](https://vercel.com/docs/concepts/next.js/incremental-static-regeneration) 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)](https://nextjs.org/learn/seo/introduction-to-seo/webcrawlers) 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`:

```javascript
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