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.