NextJS - Criando a primeira página com NextJS, React e JavaScript - Parte 2
Criando a primeira página com NextJS
Essa é uma série de artigos que nos ajudará a criar a página de e-commerce da Hcode utilizando NextJS, React e JavaScript.
A primeira parte dessa série é o setup, se você ainda não viu, recomendamos ver primeiro:
https://hcode.com.br/#/blog/1-nextjs-introducao
Agora vamos abrir o VSCode, e criar um arquivo chamado index.js dentro do diretório pages criado no artigo anterior.
![Criando uma página do Next.js no Visual Studio Code](https://storage.googleapis.com/hcode.com.br/files/2020/02/24/99b60e7b32da9c7cc2bdd3598abc448a.webp)
Dentro do arquivo index.js vamos criar um componente que será exportado, contendo uma sintaxe JSX, que permite utilizarmos comandos HTML e similares dentro do React com de forma transparente, repare que temos apenas uma instrução return dentro da função e que ela utiliza parênteses, assim o código JSX é reconhecido e pode ser traduzido para a aplicação final.
Algo que nos ajudará a escrever componentes e aplicações robustas e corretas tem haver com a análise sintática que não ocorre com o HTML nativamente, aqui no NextJS se você esquecer de fechar uma tag ou errar alguma regra HTML um erro será exibido, por exemplo, imagine que não fechamos o sinal de maior ">" da Div de fechamento, será produzido o seguinte resultado:
![Exemplo de erro do Next.js no Google Chrome](https://storage.googleapis.com/hcode.com.br/files/2020/02/24/bf815d59acca29a7b355a35ffde55b1f.webp)
Isso em tempo real, salvou o arquivo já reflete, falha ao compilar, e o motivo já vimos, faltou fechar a tag "jsxTagEnd" Não é incrível? Isso é possível porque o WebPack está presente e possui o Hot Module Replacement embutido. Um tipo de Hot Reload.
Vamos criar mais uma página para nossa aplicação? Na pasta Pages, crie um arquivo com o nome produtos.js e semelhante ao arquivo index.js vamos criar um componente e exportar.
![Exemplo de uma página de Produtos do Next.js no Visual Studio Code](https://storage.googleapis.com/hcode.com.br/files/2020/02/24/1fc3ab31060e39d748a4b1ce665fe11b.webp)
Para acessar essa página, basta chamá-la com a rota produtos: localhost:3000/produtos
![Resultado final no Google Chrome](https://storage.googleapis.com/hcode.com.br/files/2020/02/24/fc16dc7d446bb86d97bee2132dd9673f.webp)
Agora precisamos criar links entre as páginas, o próprio NextJS possui um recurso de navegação que não irá atualizar toda a página como o comportamento padrão do elemento <a>, vamos ver esse componente no próximo artigo.
Até lá!
Glaucio Daniel