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.