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.

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.

Dentro do diretório hcode-ecommerce crie um diretório chamado 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)

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

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

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

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

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