NextJS - Crie aplicações dinâmicas com React e JavaScript - Setup - Parte 1

1 de agosto de 2022
Ronaldo B.

NextJS - Crie aplicações Web renderizando no Lado do Servidor com React e JavaScript

Assim como PHP que temos uma aplicação Back-End que recebe um request, processa e devolve uma resposta, podemos utilizar a Lib NextJS que permite utilizar React e JavaScript no lado do Servidor, para renderizar muitas informações e devolver para a aplicação Front-End um código otimizado e entre outras vantagens temos:

  • Um sistema intuitivo baseado em rotas (incluindo suporte a rotas dinâmicas)
  • Otimização automática de páginas estáticas
  • Renderização de páginas no lado do servidor, analisando e filtrando requisições.
  • Melhoria no carregamento do site
  • Roteamento no lado do cliente para otimização das páginas
  • Suporte ao CSS nativo e a bibliotecas CSS-in-JS
  • Sistema baseado em WebPack com o Hot Module Replacement (HMR) ativado.
  • Sistema de rotas de API para criar sua própria API com funções serverless.
  • Customizável com plugins criados pela comunidade ou sua própria configuração do Babel ou do WebPack.

NextJS é multiplataforma, o que significa que funcionará muito bem em Windows, Linux e MacOS. Como muitos recursos da web moderna, será necessário ter apenas o NodeJS instalado para começar a utilizá-lo.

Comandos para iniciar um projeto com NPM

Vamos criar um diretório hcode-ecommerce e acessar esse diretório. Em seguida vamos iniciar um arquivo de configuração do NPM chamado package.json para armazenar as configurações do projeto.

Comendo para instalar o Next.js com NPM

Dentro do diretório hcode-ecommerce crie um diretório chamado pages

Comando para criar uma pasta com o nome "pages"

Em seguida vamos instalar o React, React-Dom e o NextJS armazenando no Package.json as configurações de instalação. Abra o arquivo package.json gerado no projeto, em um editor de texto(IDE) recomendamos o Visual Studio Code(VSCode)

Exemplo de arquivo package.json no Visual Studio Code

Na linha 6 do arquivo referido, temos a propriedade "scripts", substitua esse trecho por:

Propriedade "scripts" do arquivo package.json

Dessa maneira, sempre que executarmos o comando npm run dev o Node irá executar o comando next.

Comando para executar o Next.js em ambiante de desenvolvimento

É possível que o sistema operacional solicite a permissão de execução do NodeJS, basta clicar em Permitir acesso.

Alerta de Segurança do Windows ao executar o Node.js

Aí você pensa, fiz alguma coisa errado, por que apareceu uma página de erro 404... rsrsrs é primeira pegadinha... está tudo certo.

Resultado final do Next.js no Google Chrome

Quer dizer, se apareceu um erro 404 está correto, senão, dá uma revisada nas instruções e veja se não pulou nenhuma etapa, como criar a pasta pages... é muito comum errar esse ponto.

Agora que o Setup do NextJS está finalizado, vamos criar a nossa primeira página? No próximo artigo, até lá.

Glaucio Daniel

Hcode: Utilizamos cookies para a personalização de anúncios e experiências de navegação dentro de nosso site. Ao continuar navegando, você concorda com as nossas Política de Privacidade.