Os componentes são parte essenciais de um projeto next.
Vamos criar o exemplo de components?
Precisamos criar uma pasta dentro do "src"
chamada "components".
Então vamos lá.
Botão direito, "new folder", "components".
E agora,
botão direito em cima de "components", "new file",
eu vou criar com a primeira letra maiúscula "Exemplo.jsx".
Percebam que eu criei na extensão "jsx" porque é JavaScript.
Com o projeto rodando e o seu componente aberto,
podemos verificar o que vai acontecendo ao executar os comandos.
Para você poder criar um exemplo de um projeto,
você pode digitar o seguinte comando: "rafce"
que ele já monta sua estrutura e já com o exemplo aqui,
Vou colar um código de um projeto feito anteriormente
para ser executado no navegador e fazer a manipulação do componente.
Com o código colado temos a seguinte codificação:
Declaração de variáveis, onde estou declarando a variável nome
que recebe "Fiap", por "exemplo1", 2 e 3
e cada uma com os seus valores em cima do "return".
Tudo o que for de JavaScript fica em cima do "return"
e tudo o que for de html abaixo do "return".
Isso significa o porquê do jsx,
que é a junção de html com o JavaScript.
Percebam que ele não está aparecendo aqui na tela.
Ainda continua o "Fiap" que eu coloquei no "page".
Isso é porque eu não estou chamando esse componente "Exemplo".
Ele está aqui em "components" temos "Exemplo" que é o componente,
mas eu não estou chamando ele.
Como vamos fazer isso?
Bem, em "page.js" vamos chamar esse componente,
por exemplo, "Exemplo"
e vou importá-lo.
"Import Exemplo".
Observem que ao importar no "page.js"
"Exemplo" e chamar ele aqui, ele já apareceu.
Então tudo que estava em exemplo agora aparece no nosso navegador.
Como: "Seja bem-vindo ao next.js".
"Lista de vantagens do next".
Isso acontece porque o "page" está renderizando "Exemplo".
Perceberam que foi muito rápido essa renderização?
Isso é uma das vantagens que o next tem.
Então vamos ver como ficou o nosso projeto.
Temos as declarações em cima do "return",
temos aqui dentro do return,
que é o que vai aparecer no seu navegador
uma "div", um "h1" com o título.
Observem que o as chaves com o nome está representando
o que você declarou aqui em cima.
Isso vai acontecer com exemplo1, exemplo2, exemplo3.
Se você tirar o nome, o nome não aparece mais.
Se colocar, ele aparece.
E estamos na "page.js" chamando o componente "Exemplo"
com o seu import.
Sem ele, ele apresenta um erro.
E trazendo ele novamente ele volta a funcionar.
Fique atento com o import do seu componente,
isso pode lhe trazer erros que o next te ajuda a corrigir no navegador,
tornando o seu projeto mais rápido e dinâmico.