Na 2021 Next.js Conf em 15 de junho, desenvolvedores de todo o mundo se juntou para testemunhar o lançamento de Next.js 11 , o lançamento mais recente da equipe Vercel. As atualizações e novos recursos incluídos no Next.js 11 ofereceram melhorias significativas para uma biblioteca já popular.
Neste artigo, daremos uma olhada em detalhes em algumas dessas atualizações, que impactaram as experiências do usuário e do desenvolvedor. Vamos começar!
Conformidade
Em sua essência, conformidade é um conjunto de princípios ou diretrizes de codificação que tira parte da responsabilidade de tomada de decisão do desenvolvedor. Ao definir padrões e fornecer diretrizes, é mais fácil alcançar o resultado desejado e evitar erros comuns.
De acordo com a equipe Next.js, “conformidade é um sistema que fornece soluções e regras cuidadosamente elaboradas para oferecer suporte ideal carregando e Core Web Vitals ”.
Os novos princípios de conformidade em Next.js 11 podem ser divididos em três áreas:
1. Padrões fortes
A estrutura deve ter certos padrões de design estabelecidos em seu núcleo que tornam difícil para o desenvolvedor fazer as coisas incorretamente.
2. Regras acionáveis
Apesar de ter padrões fortes em vigor, haverá ocasiões em que a responsabilidade recairá sobre o desenvolvedor para selecionar entre dois caminhos potenciais. Um conjunto de regras acionáveis tornará mais fácil para o aplicativo aderir a fortes padrões de desempenho, ao mesmo tempo que permite um nível suficiente de personalização.
3. Tempo de autoria
O tempo de criação dá importância ao desempenho durante o ciclo de desenvolvimento de um recurso, e não após a produção. O desempenho deve ser considerado antes da confirmação do código, em vez de ser tratado como uma métrica baseada em análise após o lançamento do produto.
Uma das maneiras mais fáceis de aplicar o princípio de tempo de criação é por meio de regras de linting. Portanto, Next.js 11 suporta ESLint pronto para uso.
Para obter os benefícios desses recursos, você deve atualizar para a versão mais recente do Next.js executando o seguinte código:
npm i next @ últimas react @ últimas react-dom @ últimas
Habilite o linting executando o código abaixo:
npx próximo lint
Assim que atualizarmos nossa versão e ativarmos o ESLint, começaremos a receber avisos que nos orientam na direção das melhores práticas do setor, ajudando nossos aplicativos a aderir às diretrizes de conformidade.
Otimização de script
Muitos sites incluem scripts de terceiros para permitir análises e anúncios.
A ordem em que os scripts são carregados tem um grande impacto no desempenho da página, principalmente ao lidar com vários scripts externos em uma página da web. Se não forem gerenciados de maneira adequada, os scripts podem degradar gravemente a experiência do usuário.
Next.js introduziu um Componente de script com uma propriedade de estratégia que lida com muitos desses problemas.
Vamos testar! Uma mudança perceptível é que não precisamos mais envolver a tag de script HTML nativo na tag next/head :
import Head from'next/head'
function Home () { Retorna ( <> )
}
Em vez disso, podemos usar a tag de script HTML nativo diretamente, conforme mostrado abaixo:
importar Script de'próximo/script'
function Home () { Retorna ( <> )
}
Neste exemplo, somos aconselhados a carregar nosso polyfill usando a estratégia beforeInteractive . Vamos mudar as estratégias para ver como isso afeta o carregamento dos scripts!
beforeInteractive
Os scripts são injetados no HTML no lado do servidor e executados no navegador antes que o JavaScript incluído possa ser executado. Usando o bloco de código abaixo, vemos que a chamada de rede para buscar o polyfill é feita antes de tudo na guia de rede:
afterInteractive
Se mudarmos nossa estratégia para afterInteractive , o script será executado depois que a página se tornar interativa. A solicitação de rede está na parte inferior da página na guia de rede, que prioriza as tarefas mais importantes.
lazyOnload
Alterar a estratégia para lazyOnload diz ao Next.js para carregar o script durante o tempo ocioso. A solicitação de rede para buscar o polyfill desce ainda mais para a parte inferior da página; não há outros scripts carregados lentamente, como visto na próxima captura de tela.
onLoad prop
Além das personalizações acima, se quisermos executar algum código após o carregamento de um script, podemos usar a propriedade onLoad para a tag do script. O prop onLoad garante que o script acima seja carregado, permitindo que a função use os recursos e variáveis do script sem travar:
