NextJS - Crie aplicações dinâmicas com React e JavaScript - Setup - Parte 1
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](https://storage.googleapis.com/hcode.com.br/files/2020/02/24/62d7ed8eddd137b7f1c9a6c886471bcc.webp)
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](https://storage.googleapis.com/hcode.com.br/files/2020/02/24/a8cae499098bac27bc3bdba1ee63e175.webp)
Dentro do diretório hcode-ecommerce crie um diretório chamado pages
![Comando para criar uma pasta com o nome "pages"](https://storage.googleapis.com/hcode.com.br/files/2020/02/24/0b4f1e391ba82331d8c5c471f8a2fc05.webp)
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](https://storage.googleapis.com/hcode.com.br/files/2020/02/24/ee6b35bc51244a5f0016ee998df80a74.webp)
Na linha 6 do arquivo referido, temos a propriedade "scripts", substitua esse trecho por:
![Propriedade "scripts" do arquivo package.json](https://storage.googleapis.com/hcode.com.br/files/2020/02/24/adf795790912e94cff38730f0fcd1662.webp)
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](https://storage.googleapis.com/hcode.com.br/files/2020/02/24/f9f0a4e521a441acd802cd5f37d165e1.webp)
É 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](https://storage.googleapis.com/hcode.com.br/files/2020/02/24/01b23659bef0139ec41aa1daafc4461d.webp)
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](https://storage.googleapis.com/hcode.com.br/files/2020/02/24/e22e6155b622a7b8c4e05ca8dc0a8510.webp)
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