Next 13 - Features
- Next 13 - Features
A verão 13 do NextJS foi lançada no dia 25 de outubro de 2022, durante a NextConf 22, nesse artigo irei comentar as principais funcionalidades dessa versão.
Caso você já queira atualizar o seu projeto NextJS que está abaixo da versão 13.0.0, você pode rodar o seguinte comando em seu terminal:
$ npm i next@latest react@latest react-dom@latest eslint-config-next@latest
Turbopack
Para mim, esse foi um dos principais anúncios da NextConf, o Turbopack é o novo sucessor do Webpack baseado em Rust. Segundo a Vercel, empresa por trás do NextJS, as ferramentas baseadas em JavaScript já atingiram o seu limite máximo de desempenho.
Em versões anteriores do NextJS a Vercel já vinha anunciando diversas mudanças em suas ferramentas nativas para ferramentas baseadas em Rust. A primeira ferramenta migrada foi o Babel, resultando em uma transpilação 17x mais rápida, após isso foi sua ferramenta de minificação, obtendo um resultado 6x mais rápido.
O Turbopack atualmente é:
- 700x mais rápido do que o Webpack convencional.
- 10x mais rápido do que Vite
- Início 4x mais rápido do que o Webpack
Conseguimos ver o brilho do Turbopack em aplicações de larga escala, na imagem abaixo podemos ver uma comparação de um aplicativo com 10mil componentes, enquanto o Vite demora 37.2s para poder iniciar a aplicação o Turbopack consegue iniciar em míseros 6.1s
Outro ponto que beneficia esse tempo é que o Turbopack agrupa apenas os assets mínimos necessários no desenvolvimento.
Atualmente o Turbopack está suportado apenas para ambiente de desenvolvimento, a Vercel ainda está trabalhando para adicionar esse suporte no momento da build. Você já pode testar a alpha do Turbopack hoje, basta apenas ter um projeto com Next 13 e rodar o comando:
$ next dev --turbo
Diretório app/
Sabemos que o NextJS contém por padrão um sistema de roteador baseado nos arquivos de seu repositório. Com o Next 13 melhoraram o sistema de de roteamento e o sistema de layouts com a introdução do diretório app/. Os suportes incluídos foram:
- Layouts: compartilhe facilmente a UI, preservando o estado e evitando re-renderizações.
- Streaming: Exiba estados de carregamento instantâneos e transmita atualizações.
- Componentes do servidor: tornando o servidor em primeiro lugar o padrão para os aplicativos mais dinâmicos.
- Data fetching: um novo use hook que permite um fetching em nível de componente.
Layouts
O diretório app/ facilita o sistema de layouts de interfaces complexas que mantêm o estado entre as navegações, evitam re-renderizações caras e permitem padrões de roteamento avançados.
Agora também podemos definir layouts por meio do sistema de arquivos. Os layouts compartilham sua interface entre várias páginas. Na navegação, os layouts preservam o estado, permanecem interativos e não são renderizados novamente.
// app/blog/layout.js
export default function BlogLayout({ children }) {
return <section>{children}</section>;
}
Server Components
O diretório app/ apresenta suporte para uma nova arquitetura de Server Components do React. Os Server Components usam o servidor e o cliente para o que são melhores, permitindo que você crie aplicativos rápidos e altamente interativos com um único modelo de programação que oferece uma ótima experiência ao desenvolvedor.
Ao usar os Server Components, você pode reduzir a quantidade de JavaScript enviada ao cliente, permitindo carregamentos iniciais de página mais rápidos.
Quando uma rota é carregada, o tempo de execuç ão do NextJS e React serão carregados, que podem ser armazenados em cache e de tamanho previsível. Esse tempo de execução não aumenta de tamanho à medida que seu aplicativo cresce. Além disso, o tempo de execução é carregado de forma assíncrona, permitindo que seu HTML do servidor seja progressivamente aprimorado no cliente.
Streaming
O diretório app/ apresenta a capacidade de renderizar progressivamente e transmitir de forma incremental as unidades renderizadas da UI para o cliente.
Com Server Components e layouts aninhados em Next.js, você pode renderizar instantaneamente partes da página que não exigem dados especificamente e mostrar um estado de carregamento para partes da página que estão buscando dados. Com essa abordagem, o usuário não precisa esperar que a página inteira seja carregada antes de poder começar a interagir com ela.
Data Fetching
Confesso que esse tópico me deixou com um pouco de hype, pois o diretório app/ apresenta uma nova maneira de buscar dados. O novo use hook substitui as APIs Next anteriores, como getStaticProps e getServerSideProps.
// app/page.js
import { use } from 'react';
async function getData() {
const res = await fetch('...');
const name: string = await res.json();
return name;
}
export default function Page() {
const name = use(getData());
return '...';
}
Agora há uma maneira flexível de buscar, armazenar em cache e revalidar dados no nível do componente. Isso significa que todos os benefícios de Static Site Generation (SSG), Server-Side Rendering (SSR), Incremental Static Regeneration (ISR) estão agora disponíveis através do use hook do React e estendendo a API de fetch da Web. Veja o exemplo abaixo:
// Esta solicitação deve ser armazenada em cache até ser invalidada manualmente
// Semelhante a `getStaticProps`.
// `force-cache` é o padrão e pode ser omitido.
fetch(URL, { cache: 'force-cache' });
// Essa request deve ser realizado o refatching a cada request.
// Semelhante a `getServerSideProps`.
fetch(URL, { cache: 'no-store' });
// Essa solicitação deve ser armazenada em cache com um tempo de vida de 10 segundos.
// Semelhante a `getStaticProps` com a opção `revalidate`.
fetch(URL, { next: { revalidate: 10 } });.
A capacidade de colocar a busca de dados dentro de componentes e enviar menos JavaScript para o cliente foram dois importantes feedbacks da comunidade que a equipe da Vercel comentou ter recebido.
next/image aprimorado
Acredito que você já deve conhecer o componente de Imagem do Next, caso ainda não o conheça você pode visualizar a documentação desse componente clicando aqui. Durante a NextConf revelaram que segundo uma pesquisa de comunidade, 70% das respostas alegam já utilizarem o next/image em produção e que isso melhorou o Core Web Vitals de sua aplicação.
Em versões anteriores ao Next 13 tínhamos o componente next/future/image, se você já utilizava as funcionalidades experimentais do next/future/image, na versão 13 essas funcionalidades foram aplicadas ao componente de imagem padrão do Next.
Essas novas funcionalidades são:
- Menos JavaScript para o lado do cliente
- Mais simples de configurar e estilizar
- Exigência do atributo alt por padrão
- Mais rápido pois contém o lazy loading nativo
Vale pontuar que o antigo componente de imagem, que utilizávamos em versões anteriores ao Next 13, foi renomeado para next/legacy/image. Caso deseje atualizar o seu projeto Next para a versão 13 mas não deseja utilizar essas novas features do componente de imagem você poder rodar o seguinte comando:
npx @next/codemod next-image-to-legacy-image ./pages
@next/font
O Next 13 apresenta um novo sistema de fontes, que adiciona:
- Otimização automática de suas fontes, incluindo fontes personalizadas
- Remove solicitações de rede externa para melhorar a privacidade e o desempenho
- Auto-hospedagem automática integrada para qualquer arquivo de fonte
Este novo sistema de fontes permite que você use todas as fontes do Google com desempenho e privacidade. Os arquivos CSS e de fonte são baixados no momento da compilação e auto-hospedados com o restante dos assets estáticos. Nenhuma solicitação é enviada ao Google pelo navegador.
next/link
O componente next/link não requer mais uma tag <a> como filho. Essa funcionalidade já era uma opção experimental na versão 12.2 agora está habilitada como padrão. No Next 13, o componente <Link> vai renderizar uma tag <a>.
Similar ao componente de imagem, caso você queira realizar o upgrade do componente next/link em sua base de código, basta rodar:
$ npx @next/codemod new-link ./pages