Os componentes são parte essenciais de um projeto Next.
Vamos criar um exemplo de componentes?
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 a 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, como estou declarando a variável nome
que recebe "Fiap", "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?
Essa é 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.