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.

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:

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.

Para acessar essa página, basta chamá-la com a rota produtos: localhost:3000/produtos

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