Conteúdo[Esconder][Mostrar]
Ao escolher uma biblioteca ou estrutura de software, a experiência do desenvolvedor geralmente é levada em consideração.
Quando menciono “experiência do desenvolvedor”, estou me referindo a como os desenvolvedores realmente fazem o trabalho. Os desenvolvedores escolhem bibliotecas ou frameworks que são agradáveis de usar.
Esta é uma das principais razões pelas quais agora temos as bibliotecas e frameworks mais populares. Como desenvolvedores, não precisamos começar do zero quando existem ferramentas criadas para nos auxiliar em nossas tarefas.
Frameworks são pedaços de software que são criados e usados por desenvolvedores para construir aplicativos, e o NextJS é um deles.
Neste post, veremos o Nextjs, seus principais recursos e como podemos usá-lo para construir um aplicativo. Vamos pular direto.
O que é Next.js?
Próximo.js é uma estrutura JavaScript para a construção rápida e fácil de páginas da Web estáticas e aplicativos online baseados em React. Ele permite que você crie ótimos aplicativos da Web para uma variedade de plataformas, incluindo Windows, Linux e Mac.
Você deve estar familiarizado com a estrutura Next.js se tiver familiaridade mínima com react e quiser aprender mais sobre o ecossistema react.
Embora o Next.js venha com tudo o que você precisa para começar, você pode selecionar entre NPM e Yarn, JavaScript e TypeScript, CSS e SCSS, exportação estática e implantação sem servidor.
Funcionalidades
- O roteamento é feito automaticamente – Você não precisa configurar nada porque qualquer URL é mapeada para o sistema de arquivos, para arquivos na pasta de páginas (você tem opções de personalização, é claro).
- Componentes de um único arquivo – É simples adicionar estilos no escopo do componente usando styled-jsx, que é totalmente integrado e produzido pela mesma equipe.
- Recarregando um Hot Code – Quando o Next.js detecta uma modificação salva no disco, ele recarrega a página.
- Componentes Dinâmicos – Você pode carregar módulos JavaScript e Componentes React dinamicamente.
- Exportações estáticas – Next.js permite exportar um site completamente estático do seu aplicativo com o próximo comando de exportação.
- Compatibilidade com o ambiente – Next.js integra-se perfeitamente com os ecossistemas JavaScript, Node e React.
- Dividindo Códigos Automaticamente – Somente as bibliotecas e JavaScript necessários são usados para renderizar as páginas. Em vez de criar um único arquivo JavaScript contendo todo o código do aplicativo, o Next.js divide o aplicativo de forma inteligente em vários recursos.
Como criar um aplicativo next.js?
Instalação
Você pode usar o comando node npx para instalar e construir um projeto Next.js.
Isso gerará uma pasta e todos os arquivos, configurações e outros itens necessários para executar um projeto Next.js.
Você pode iniciar o aplicativo assim que ele for gerado.
Páginas e roteamento
Para lidar com rotas com Next.js, não precisamos empregar uma estrutura de roteamento. O roteamento com Next.js é muito fácil de configurar. Quando você usa o comando create-next-app para criar um novo aplicativo Next.js, o aplicativo cria uma pasta chamada 'pages' por padrão.
Esta pasta 'pages' é onde você mantém suas rotas. Como resultado, cada arquivo de componentes reacts no subdiretório será tratado como uma rota separada.
Por exemplo, se a pasta contiver esses arquivos:
- index.js
- sobre.js
- aricles.js
Este arquivo será transformado automaticamente de três maneiras:
- A página de índice localhost/index
- A página sobre localhost/about
- A página do blog localhost/articles
Um exemplo de uma página about.js é mostrado abaixo. Nada é fornecido sobre a página, como você pode ver. É simplesmente um componente funcional padrão do React.
rotas
Para fazer rotas aninhadas, você deve primeiro estabelecer uma subpasta. Por exemplo: páginas/artigos. Crie seu componente react 'contact.js' dentro dessa pasta, e ele irá gerar a página localhost/articles/contact.
Se você colocar um arquivo em pages/articles.js e outro em pages/articles/index.js. Ambos refletem o mesmo caminho localhost/blog. Nessa situação, o Next.js apenas renderizará o arquivo article.js. E as rotas dinâmicas, em que cada postagem do blog tem seu próprio caminho:
- localhost/blog/primeiro artigo
- localhost/blog/-segundo-artigo
Usando a notação de colchetes, você pode definir uma rota dinâmica em Next.js. Por exemplo: pages/article/[slug].js
Rotas de link
Agora você completou sua primeira rota. Suponho que você esteja perguntando como conectar páginas a essas rotas. Você precisará de 'next/link' para fazer isso.
Aqui está um exemplo de uma página inicial que inclui um link para a página Sobre:
Se você deseja estilizar o link, use a seguinte sintaxe:
Redirecionar Rotas
E se você precisar forçar um redirecionamento para uma determinada página? Por exemplo, quando um botão é pressionado? Você pode fazer isso usando 'router.push':
SEO
Páginas em aplicativos da Web requerem elementos meta (head) além de dados dentro do corpo HTML. Isso exigirá a instalação de um requisito extra chamado React Helmet em um aplicativo React.
Podemos usar o componente Head de next/head em Next para adicionar facilmente metadados às nossas páginas da Web que serão exibidas nos resultados de pesquisa e incorporações:
Componentes
Você frequentemente precisará desenvolver componentes ou um arquivo de layout. Por exemplo, um componente que renderiza a barra de navegação. Acabamos de usar a pasta pages até agora. E se o seu componente não for uma página de rota?
Você não quer que o usuário navegue para uma página como localhost/navbar. Se você colocar o componente Navbar.js na pasta pages, é isso que vai acontecer. O que você deve fazer na situação?
Simplesmente armazene todos os seus componentes 'not a page' em uma pasta separada. A maioria dos projetos Next.js usa o moniker 'components' e essa pasta é gerada na pasta raiz do seu projeto.
Componente de cabeça
O carregamento inicial da página é renderizado pelo Next.js no lado do servidor. Ele faz isso modificando o HTML da sua página. A seção de cabeçalho está incluída.
O componente Next.js Head é usado para fornecer tags de seção de cabeçalho, como título e meta. O componente Head é usado neste exemplo de componente Layout.
Criar página 404 não encontrada
É possível criar sua própria página de erro 404. Você pode personalizar a mensagem ou adicionar seu próprio design de página. Na pasta pages, crie o arquivo 404.js.
Quando ocorrer um erro 404, o Next.js redirecionará automaticamente para esta página. Aqui está um exemplo de uma página 404 personalizada:
Busca de dados do lado do servidor
Em vez de baixar os dados no lado do cliente, o Next.js permite realizar um preenchimento inicial de dados, o que implica enviar a página com os dados já preenchidos do servidor.
Você tem duas opções para implementar a busca de dados do lado do servidor:
- Os dados devem ser buscados em cada solicitação.
- Obtenha dados apenas uma vez ao longo do processo de construção (local estático)
Buscar dados em cada solicitação
O método getServerSideProps é usado para renderizar cada solicitação no lado do servidor. Esta função pode ser incluída no final do seu arquivo de componente. Next.js preencherá automaticamente suas props de componente com o objeto getServerSideProps se essa função estiver presente em seu arquivo de componente.
Buscar dados em tempo de compilação
O método getStaticProps é usado para renderizar o lado do servidor em tempo de compilação. Esta função pode ser incluída no final do seu arquivo de componente. Este método executa o código do servidor e envia uma solicitação GET para o servidor, mas apenas uma vez quando nosso projeto é finalizado.
Por que você deve aprender Next.js?
Uma das razões para isso é porque o Next.js é construído em cima do React, um kit de ferramentas de desenvolvimento front-end para criando interfaces de usuário que são minha escolha favorita para projetar aplicativos da web.
Mas não seria suficiente se o Next.js não fosse bom no que fazia… certo?
Então, o que exatamente isso faz?
Devemos primeiro definir alguns conceitos para compreendê-lo. O Next.js ganhou popularidade porque resolveu um problema que muitos desenvolvedores da Web tinham com aplicativos da Web do lado do cliente (no navegador). Esses aplicativos de página única (SPAs) tiveram uma experiência melhor, pois não precisavam que o usuário recarregasse a página e permitiam mais interatividade.
No entanto, como a maior parte do material em um aplicativo como esse se torna visível apenas quando executado no navegador, os rastreadores da Web têm dificuldade em entender o conteúdo de texto desse aplicativo.
Como resultado, apesar de sua popularidade, muitos SPAs permaneceram em grande parte anônimos para grandes mecanismos de busca como o Google. Next.js agora inclui um mecanismo interno mais robusto para renderização do lado do servidor (SSR) de componentes React.
O Next.js permite que os desenvolvedores construam código JavaScript no servidor durante o processo de compilação e forneçam HTML básico e indexável ao usuário.
Prós
- Ótimo para experiência do usuário
- Ótimo para SEO
- Crie um site estático super-rápido que se comporte como um site dinâmico
- Flexibilidade na construção de UI e UX.
- Muitas vantagens de desenvolvimento
- Ótimo suporte da comunidade
Desvantagens
- Sites ou aplicativos têm um certo tempo para construir ou desenvolver.
- Para determinadas tarefas, o Next.js é inadequado. Os desenvolvedores devem ser capazes de construir rotas dinâmicas usando ferramentas Node.js.
Conclusão
Como você pode ver, o Next.js simplifica o desenvolvimento do aplicativo React e permite que você se concentre no que mais importa – a lógica do aplicativo e a interface do usuário. Ele inclui tudo o que é necessário para criar aplicativos contemporâneos, ricos em front-end e com API.
Também é apropriado para projetos somente de conteúdo, como blogs e sites de negócios, devido à sua capacidade de criar páginas HTML estáticas.
Com as edições atuais, o Next.js não apenas mantém um alto nível de experiência do desenvolvedor, mas também fornece ferramentas para aumentar o desempenho visual e a experiência do usuário, garantindo um futuro brilhante para essa estrutura.
Deixe um comentário