E foi lançado o Next.js 9.3 com suporte para geração estática de sites, otimização 404 e muito mais. Confira as novidades dessa atualização.
Next.js é um framework React para renderização no servidor, que seus criadores apresentam como uma cadeia de ferramentas de comando único de configuração zero para aplicativos React.
Essa framework fornece uma estrutura comum que permite criar facilmente um aplicativo front-end do React e gerenciar de forma transparente a renderização do lado do servidor.
Agora, a versão 9.3 do Next.js foi lançada com novos recursos e algumas melhorias.
Novidades do Next.js 9.3
Com o lançamento do Next.js 9.0, a estrutura introduziu o conceito de otimização automática estática. Quando uma página não possui requisitos de bloqueio de recuperação de dados, como getInitialProps, ela renderiza automaticamente em HTML, uma vez criada.
Há outros casos em que você pode criar uma página em HTML estático no momento da compilação, mesmo com os requisitos de extração de dados bloqueados. É o caso, por exemplo, de páginas de marketing alimentadas por um sistema de gerenciamento de conteúdo (CMS).
O Next.js 9.3 apresenta dois novos métodos de recuperação de dados: getStaticProps e getServerSideProps.
Esses novos métodos têm muitas vantagens sobre o modelo getInitialProps, pois há uma clara distinção entre o que será SSG (Static Side Generation) e SSR (Server Side Rendering). Eles são adições de API.
Todos os novos recursos são compatíveis com versões anteriores e podem ser incorporados.
Não há depreciação e getInitialProps continua funcionando normalmente. Um parâmetro getStaticPaths foi adicionado para obter o roteamento dinâmico.
- getStaticProps permite obter dados durante a construção;
- getStaticPaths permite especificar o roteamento dinâmico baseado em dados;
- getServerSideProps permite obter dados para cada solicitação.
Outra mudança que se destaca nesta nova versão é o suporte ao modo de visualização. A introdução de getStaticProps no Next.js abre novas possibilidades, como o uso dos recursos de renderização sob demanda do Next.js. sob determinadas condições.
Por exemplo, ao visualizar um rascunho em um CMS, você deseja pular a renderização estática e renderizar a página sob demanda com o conteúdo do rascunho, em vez do conteúdo publicado. Você quer que o Next.js pule a geração estática apenas nesse caso específico. De acordo com a equipe Next.js., o modo de visualização permite fazer isso.
O modo de visualização permite que os usuários pulem a página gerada estaticamente para retornar uma página de rascunho, sob demanda (por exemplo, de um CMS).
No entanto, não se limita a determinados sistemas CMS. O modo de visualização se integra diretamente ao getStaticProps e getServerSideProps, para que possa ser usado com qualquer tipo de solução de recuperação de dados.
O Next.js 9.2 adicionou suporte para CSS incorporado, mas o Next.js 9.3 adicionou suporte para Sass. Folhas de estilo globais e módulos CSS são suportados, bem como CSS embutido.
O Next.js agora suporta módulos CSS com arquivos Sass usando a convenção de nomenclatura de arquivos [name].module.scss. Ao contrário do suporte anteriormente disponível no Next.js 5+ com o next-sass, os módulos globais Sass e CSS agora podem coexistir.
Os módulos CSS permitem que o Sass seja gerenciado localmente, criando automaticamente nomes de classe exclusivos.
Com o Next.js versão 9.0, havia uma página que não era renderizada automaticamente no HTML estático: página 404.
A principal razão por trás disso é que a página de erro que alimenta 404 manipulou mais de 404. Por exemplo, também manipulou erros. Como 404 páginas são renderizadas para rotas inexistentes, a renderização da página sob demanda pode levar a custos mais altos e aumento da carga do servidor.
A versão 9.3 da estrutura melhora as coisas e oferece otimização estática automática para 404 páginas.
Agora, quando sua solicitação não inclui uma página error.js personalizada, o arquivo Next.js gera automaticamente a página 404 estaticamente e a usa quando uma 404 deve ser atendida.Isso acontece automaticamente e não são necessárias alterações.
Você também pode personalizar esta página. Para substituir a página 404 padrão, um arquivo de página 404.js pode ser criado.
Para saber mais sobre essa versão do Next.js, acesse a nota de lançamento.
- Como instalar o jogo Humanity Must Perish no Linux via Flatpak
- Como instalar o Open Sonic para jogar Sonic no Linux
- Como instalar o emulador de Super Nintendo Snes9x no Linux
- Como instalar o lançador de jogos Slippi Launcher no Linux via AppImage
O que está sendo falado no blog
