Introdução
Após o lançamento espetacular da versão 10 , onde vários de alto impacto recursos como um componente de imagem personalizado, análise Next.js, comércio Next.js, atualização rápida, etc. foram introduzidos, agora temos uma nova atualização, Next.js versão 10.1. Como parte deste lançamento, muitos desses recursos são ajustados para otimização enquanto são introduzidos alguns novos, como uma página de erro 500 personalizada, detecção de modo de visualização e extensão de configuração de texto digitado para indicar alguns. Neste artigo, vamos explorar isso em mais detalhes.
Atualização 3x mais rápida
Esse é um recurso que visa facilitar a vida do desenvolvedor. A atualização rápida é uma sucessora do React Hot Loader e foi apresentado pelo Facebook há algum tempo. Basicamente, a atualização rápida permite que o desenvolvedor faça alterações no código em qualquer componente e visualize os resultados na IU com o mínimo de atrito. Ele consegue isso recarregando apenas os componentes/arquivos que são afetados pela alteração do código, sem atualizar a página inteira, ao mesmo tempo que preserva o estado.
O Next.js introduziu a atualização rápida na versão 9.4 e, na versão mais recente, afirma-se que ele se tornou 3 vezes mais otimizado, o que significa atualizações mais rápidas e ciclos de desenvolvimento mais curtos.
Podemos ter uma ideia do recurso criando um projeto inicial e, em seguida, alterando algumas linhas de código para acionar uma atualização rápida. Para fazer isso, criamos um novo projeto usando o comando create-next-app :
npx create-next-app test-10-1
Quando o comando termina de ser executado, uma pasta é criada para nós com o nome test-10-1 . Em seguida, cd nele e executamos o aplicativo com o comando:
yarn dev
Isso inicia a página inicial padrão Next.js em localhost: 3000, que se parece com isto:
Agora, vamos transformar isso em um aplicativo de contador simples para que possamos verificar se o estado não é afetado na atualização rápida. Cole este código na pasta pages/index.js que está processando esta página:
import {useState} de'react';
importar Cabeçalho de'próximo/cabeça'
importar estilos de'../styles/Home.module.css' exportar função padrão Home () { const [contagem, setCount]=useState (0); incremento const=()=> setCount (contagem + 1); decremento const=()=> setCount (contagem-1); Retorna ( Criar próximo aplicativo Bem vindo à{''} contador app
Clique nos dois botões e observe a atualização da contagem
➕
{count}
➖
)
}
Estamos usando useState para criar uma variável de estado e duas funções chamadas incremento e decremento para modificar essa variável de estado. O que nos dá um aplicativo funcional:
Agora, vamos mudar algum texto na página e testar a rapidez com que ele é refletido na página. Abrindo index.js, fazendo uma alteração e salvando-o:
Vemos que a alteração do código é refletida na IU em um instante. Observe também que a contagem, que estava em 5, não é redefinida, o que significa que o estado também é preservado.
Aqui estão alguns pontos que precisam ser lembrados ao trabalhar com atualização rápida:
- Se um arquivo exportar apenas componentes React, a atualização rápida apenas renderiza novamente os componentes desse arquivo
- Se um arquivo exportar algo diferente de um componente React, a atualização rápida executa novamente esse arquivo junto com todos os outros arquivos que importam esse arquivo
Ao desenvolver um aplicativo grande com várias centenas de componentes, a capacidade de renderizar novamente apenas os necessários enquanto preserva o estado ajuda muito a melhorar a produtividade do desenvolvedor.
Melhorias em next/image
Para tornar a renderização de imagens mais otimizada, Next.js lançou seu próprio componente de imagem personalizado com a versão 10.0. O componente de imagem pode ser usado no lugar da tag img da seguinte maneira:
//importar da próxima/imagem importar imagem de'próxima/imagem' //uso no componente
Onde me.png é uma imagem presente na pasta pública na raiz do projeto.
Aqui estão algumas otimizações que o componente Image fornece sobre a tag img :
- A imagem é convertida automaticamente para o formato moderno.webp
- As imagens são carregadas lentamente ao entrar na visualização (o que significa carregar uma imagem apenas se a página for rolada para o local dessa imagem)
- A imagem é compactada automaticamente em tamanho sem perder muitos de seus detalhes
Novas otimizações
Na versão 10.1 do Next.js, vários aprimoramentos estão sendo feitos além desses recursos já incríveis. A otimização de imagem, que antes era alimentada por dependências nativas, agora é executada em Squoosh que usa WebAssembly . Isso também tornou a otimização da imagem compatível com a nova série M1 de Macbooks que usa Apple Silicon.
Layouts adicionais
Até recentemente, o componente Image tinha que ser fornecido com uma altura e uma largura de sustentação para que a renderização ocorresse conforme o esperado. Mas agora, o componente aceita um prop adicional chamado layout que assume os valores fixed , intrínseco , responsivo e fill . Veremos isso em detalhes, tomando um exemplo de imagem. Usaremos uma imagem gratuita de unsplash.com. Baixe-o e salve-o na pasta pública na raiz do projeto (crie a pasta se ela não existir).
Criaremos uma nova rota chamada image-test que em Next.js é realizada criando um arquivo denominado image-test.js na pasta pages .
Vamos colar algum código dentro desse arquivo para primeiro testar o tipo de layout fill :
import Head from'next/head'
importar estilos de'../styles/Home.module.css'
importar imagem de'próxima/imagem' exportar função padrão Home () { Retorna ( Teste de imagem Testando o tipo de layout fill
)
}
Isso nos dá este resultado:
Estamos colocando a imagem dentro de um div com uma largura de 300 e uma altura de 500 e, portanto, a imagem ocupa toda a área e a preenche. Além disso, usando o prop objectFit , podemos controlar a maneira como a imagem preenche a área. Por exemplo, passar o prop como objectFit: contain nos dá este resultado:
p>
O componente de imagem tenta conter a imagem inteira e, portanto, reduz sua escala.
Os layouts intrínseco e responsivo são semelhantes na maneira como permitem dimensionar a imagem de forma responsiva. A única diferença entre eles é que o responsivo permite a expansão em dispositivos maiores, enquanto o intrínseco não.
Veja como um layout intrínseco lida com a capacidade de resposta:
E é assim que um layout responsivo lida com o mesmo:
O último, que é um layout fixo , oferece uma experiência semelhante à de uma tag img normal em que não se dimensiona:
Também há suporte para um carregador personalizado para suas imagens, que é apenas uma função chamada com src , largura e qualidade e a partir do qual podemos retornar uma string. Isso seria útil se estivermos exibindo imagens de qualidades diferentes de fontes diferentes:
const myLoader=({src, largura, qualidade})=> { return `https://my-custom-loader.com/${src}?w=${width}&q=${quality || 90} `
}
Esta função de carregador precisa ser passada como o carregador do componente de imagem para o qual precisamos do componente personalizado. Se não for fornecido, o carregador de imagem é selecionado do objeto de imagem em next.config.js , caso contrário, o padrão é apenas o carregador Next.js integrado otimizado de que falamos.
Tempo de instalação aprimorado
Conforme mencionado na seção anterior, a otimização da imagem Next.js foi alimentada por dependências nativas que levaram a um grande tamanho de instalação e, por sua vez, a um grande tempo de instalação. Isso foi corrigido pela otimização do gráfico de dependência , que agora levou a uma instalação 3x mais rápida de acordo com o Next.js oficial documentação . Aqui está um gráfico que documenta as melhorias da postagem oficial do blog:
Página 500 personalizada
Como já sabemos que Next.js nos fornece a capacidade de exibir uma página personalizada sempre que qualquer rota não for encontrada, o que pode ser feito facilmente criando um arquivo 404.js dentro da pasta de páginas e colocando nosso código personalizado nesse. A mesma funcionalidade foi estendida para 500 páginas e podemos exibir facilmente páginas de erro personalizadas para o usuário final criando um arquivo 500.js no diretório de páginas e colocando nosso código personalizado lá.
Isso abre todos os tipos de possibilidades. Agora podemos fazer nossa página de erro ficar assim obtendo uma ilustração relevante de undraw e adicionando este código ao 500.js arquivo:
Lamentamos!
Parece haver algo errado de nossa parte. Seja paciente enquanto tentamos resolver isso.
Integração com Shopify
Quando o Next.js commerce foi introduzido como parte da versão 10.0, ele forneceu um guia passo a passo para implantar um mercado de comércio eletrônico completo em minutos. Mas, na época, o Next.js commerce só oferecia suporte ao BigCommerce como provedor de serviços de back-end.
De acordo com a última versão 10.1, foi adicionado suporte para usar o Shopify como um provedor de soluções de comércio eletrônico, além da opção anterior de BigCommerce. O provedor pode ser escolhido atualizando o valor do sinalizador COMMERCE_PROVIDER dentro do arquivo .env.local .
Extensão do arquivo tsconfig
Next.js está oferecendo uma opção para o desenvolvedor estender a partir de um arquivo de configuração typecript base diferente usando o arquivo tsconfig. Para fazer isso, as seguintes linhas de código precisam ser colocadas no arquivo tsconfig.json :
{ "extends":"./tsconfig.base.json"
}
Detecção do modo de visualização
Ao buscar conteúdo de um CMS sem cabeçalho, durante a fase de desenvolvimento, podemos encontrar o requisito em que modificamos os dados de rascunho no CMS sem cabeçalho e esperamos ver o fluxo de alterações em nossa página em tempo real em vez de dados gerados estaticamente que são criados no momento da construção. O modo de visualização faz exatamente isso para nós. Quando ativado, ele renderiza as páginas no momento da solicitação , em vez de no momento da construção. Com a versão 10.1, foi adicionado suporte para detectar no lado do componente, se o modo de visualização está ativado ou desativado. As informações são fornecidas como um sinalizador e podem ser acessadas a partir do gancho useRouter da seguinte maneira:
function MyComponent () { const {isPreview}=useRouter () //isPreview mantém o status do modo de visualização dentro deste componente if (isPreview) { //Coloque o código específico do modo de visualização aqui } Retorna ( <> {isPreview? Renderizar componentes específicos do modo de visualização aqui : Renderize componentes específicos do modo de não visualização aqui } )
}
Conclusão
Com todos esses recursos lançados com a versão 10.1 do Next.js, podemos dizer que ele agrada a todos. Enquanto a atualização rápida e a otimização de imagem trazem melhorias para a experiência do desenvolvedor, a personalização dos provedores de serviços de comércio abre novos caminhos para quem deseja iniciar um site de comércio eletrônico usando Next.js.
A capacidade de estender o arquivo tsconfig fornece outro nível de customização para a jornada do desenvolvedor, enquanto as 500 páginas de erro customizadas visam fornecer maior clareza para o usuário final e, novamente, fornecer controle completo nas mãos do desenvolvedor. Em suma, a versão incremental mais recente, que embora possa aparecer como um pequeno incremento, definitivamente vale a pena uma atualização.
A postagem O que há de novo no Next.js 10.1 apareceu primeiro no LogRocket Blog .
