Novidades do Next.js 13

  • Layouts:
    • Agora sempre que 2 ou mais páginas compartilharem o mesmo componente, na troca de página, o componente não será carregado novamente, já que não houve mudança em si. Essa novidade otimizará o tempo de carregamento das páginas.
  • Componentes renderizados pelo lado do servidor (Server Components):
    • Os componentes serão carregados pelo servidor, diminuindo drasticamente o JavaScript no bundle.
  • Webpack foi substituído pelo TurboPack:
    • O TurboPack promete ser 700x mais rápido que o Webpack.
  • Novo componente de Imagem (next/image):
    • Algumas props foram removidas, como: layout, lazyBoundary, objectFit e entre outras. NextJs
    • A propriedade alt é obrigatória.
    • Foi removido as tags <span /> ao redor da tag img.
  • Nova forma de carregar fontes (@next/font):
    • Irá zerar o Layout Shift
      • Layout Shift é quando a página renderiza mas acontece alguma troca de layout. É muito comum acontecer isso quando a página renderiza utilizando uma fonte padrão que o usuário possui no seu sistema, e após alguns milésimo de segundos, a página carrega com a fonte importada pelo projeto.
  • Modificações no componente de link:
    • Agora não será mais necessário adicionar uma tag <a /> dentro do componente <Link />.
  • TypeScript vai ser o padrão do Next.js:
    • O TypeScript será o default do Next.js 13.
coffeeispowerhá 2 anos

Já to começando a perceber que se a comunidade do tabnews quiser atualizar o next, vai ter muito trampo pra refatorar o codigo e fazer ele funcionar! muita coisa mudou, a pasta pages mudou, n tem getStaticProps, getServerSideProps etc..., os componentes sao renderizados no servidor e depois são hidratados (adiciona js pra interatividade) e muito mais!

Faltou falar que o turbopack é feito em rust, que desrespeito! (zoeira)

deglierhá 2 anos
Vai ser um trampo bem hard mesmo, mas pelo o que eu andei lendo na documentação deles ainda nao é recomendado usar o pages, por ainda ser una funcionalidade beta ([mais infos dessa nova ver](https://nextjs.org/blog/next-13)). Sobre uma outra funcionalidade que está presente nessa versão que é o HTML Streaming, alguém saberia me dizer com mais detalhes do que se trata ?
DiegoCrivelarohá 2 anos
Vou ter a mesma dor de cabeça lá no job XD Eu realmente esqueci de colocar que é feito em Rust XD
RodrigoChá 2 anos

eu tentei NextJs e achei muito legal, so que preferi seguir com Eleventy por achar mais facil.

DiegoCrivelarohá 2 anos
Esse framework eu não conheço. Vou dar uma olhada! :)