Fala, pessoal. Tudo bem? Nesse artigo nós vamos falar sobre as novidades da versão 13 do Next.JS. Vem conferir!

Primeiramente, sabemos que o Next.js é um dos frameworks mais conhecidos e usados que tem como base o React.

Sem dúvida, ele é um framework que vem ganhando cada vez mais espaço, principalmente pelas suas possibilidades de renderização, build, API routes response, e outros… 

Recentemente o Next teve sua atualização para a versão 13, e com isso, ele trouxe novidades muito interessantes, que com certeza serão muito úteis para o desenvolvimento com essa tecnologia.

E é por isso que hoje trago algumas das novidades desse framework. Ah, e lembrando que você pode consultar as outras novidades na própria documentação deles!

Novo diretório

Uma grande facilidade que o Next oferece nas aplicações é a pasta “pages”. Nela, uma vez que é criado um componente ou um “jsx”, o mesmo cria instantaneamente rotas na sua aplicação para acessar ela como se fosse uma página.

Nessa nova versão, o Next promete ter melhorado essa experiência ainda mais. Agora, o Next passa a ter um diretório chamado “app”, como mostra a imagem a seguir:

Com esse novo formato, as interfaces do usuário são compartilhadas de uma forma muito mais fácil utilizando o novo recurso de Layouts.

Agora vamos imaginar um Header de uma página qualquer, por exemplo.

Esse mesmo Header não será renderizado cada vez que é feito uma troca de página. Isso porque as duas páginas compartilham do mesmo Header, então ele não precisa ser renderizado novamente.

Dessa forma, compartilhar a mesma interface com diferentes páginas pode se tornar cada vez mais otimizado para o contexto da sua aplicação.

Extensão do Web Fetch

Você conhece o método “fetch”, a API de busca nativa da web?

Na nova versão do Next (e também do React) ela foi estendida!

Basicamente, se você já usou ou usa o Next no seu dia a dia, com certeza já usou os recursos dele para gerar páginas estáticas (SSG), páginas renderizadas do lado do servidor (SSR) ou a renderização com revalidação de dados.

Agora, em vez de usar os métodos “getStaticProps” ou “getServerSideProps”, o Next permite usar esses recursos por request que sua aplicação faz. Ou seja, diferentes URLS podem se comportar de diferentes formas dependendo da demanda da sua aplicação.

Pra você entender melhor, trouxe um exemplo na imagem:

Turbopack

Na nova versão do Next, ele introduz o Turbopack, onde o mesmo acredita ser o sucessor do Webpack.

O time da Vercel decidiu apostar em uma forma nativa para empacotamento dos arquivos. Por isso, o Turbopack é até 700x mais rápido que o Webpack e 10x mais rápido que o Vite:

Next Image

Na nova versão, o componente “image” foi considerado estável pela Vercel. Sua usabilidade não sofreu grandes mudanças.

No entanto, agora ele envia menos JavaScript para o lado do cliente, otimiza as imagens para a renderização não ser mais pesada do que precisa e deixa a propriedade “alt” de forma obrigatória para melhorar a acessibilidade da página:

Conclusão

Existem mais mudanças que você pode acompanhar pela própria documentação do Next que não citei aqui e que também tem muita importância como, por exemplo, o suporte ao typescript nativo na nova versão.

O Next sem dúvidas é um dos frameworks mais usados para desenvolvimento web, e com certeza vem mudando a forma de construir, e principalmente, de pensar em aplicações web.

Espero que você tenha gostado do artigo, e se quiser saber um pouco mais sobre Next, é só acessar esses links abaixo:

Como criar páginas de erro 404 em Next.JS

Next.JS e React: Curso Intensivo – Masterclass #01 [2021]

Então por hoje é isso, até a próxima, pessoal!