vimeo.com/.../1007069050

O "Next.js" pode ser utilizado
para diversas plataformas,

com diversos
objetivos diferentes.

Então, qual será o desafio
dessa nossa disciplina?

Na nossa jornada de aprendizado,
iremos construir um blog interativo,

manipulando posts,
gerenciando comentários

e criando recursos fundamentais,
como login e cadastro de usuários.

Ao longo do projeto,
abordaremos, de forma abrangente,

diversos recursos do Next
que são utilizados

no dia a dia
do mercado de trabalho,

como, por exemplo,
a criação de um projeto do 0,

a manipulação de componentes,
o roteamento,

a conexão
com o banco de dados,

utilizando uma ferramenta
chamada "Prisma",

sistemas de autenticação,
entre vários outros

que vamos conseguir construir
um blog bem completinho.

Quais são os conhecimentos
e ferramentas necessários

para a gente
iniciar esse projeto?

Para você começar o projeto
com tranquilidade,

é importante que conheça
um pouquinho de "HTML", "JavaScript"

e "CSS" utilizando
"Tailwind CSS",

que, junto com uma biblioteca
chamada "Daisy UI",

a gente vai construir a interface
do nosso projeto.

Além disso, é legal que você
conheça alguns recursos do "React",

a partir da versão 18,

como componentes
funcionais, estados,

"React Hooks"
e alguns outros recursos.

E, além disso, usaremos
algumas bibliotecas do "React",

como "React Hook Form", "Zod"

e algumas bem comuns
no mundo do front-end.

Além disso, você precisa
ter algumas coisinhas

instaladas na sua máquina,

que vamos usar
para o nosso projeto.

Para utilizar
essas ferramentas,

vai precisar de algumas coisas
instaladas no computador.

Uma delas é o "Node.js",
a partir da versão 18,

para garantir que tudo
vai funcionar certinho,

e vamos utilizar um gerenciador
de dependências chamado "Yarn".

Além disso, vamos utilizar também
o "VS Code" como "IDE",

para podermos fazer toda
a parte de código do nosso projeto.

A seguir, nós vamos
ver um pouquinho

como funciona o processo
de instalação dessas ferramentas.

Já no site
do "VS Code",

você pode chegar digitando
"code.visualstudio.com"

ou pelo próprio Google.

Na homepage, a gente já tem
o botão de instalação,

tanto para Windows,
como para outras plataformas.

Então, você pode
escolher a plataforma

que melhor se encaixa
para a sua máquina,

e a gente vem aqui no botãozinho
"Download for Windows".

É só clicar no arquivo executável
que está baixando.

Aqui, ele está avisando
que a gente vai rodar o "VS Code",

mesmo não sendo administrador
da máquina e está tudo bem.

Eu vou colocar aqui o OK.

Ele está me dando uma mensagem
que eu já tenho instalado,

mas eu ainda
vou continuar,

só para mostrar para vocês
um pouco do processo.

Aqui, a gente tem que ler
os termos e aceitá-los.

Dá o "next", aqui vai mostrar
onde é a pasta que ele vai instalar,

o nome da pastinha
que ele vai criar.

Eu aconselho vocês a habilitar
a opção "Open With Code".

Por quê?

Ela ajuda, para qualquer arquivo
ou pass que quisermos abrir,

vamos ter a opção,
ao clicar com o botão direito,

de abrir direto
no "VS Code".

Então, é uma praticidade
que nos ajuda bastante

na utilização no dia a dia.

Então, voltando para a instalação,
vou habilitar essas opções,

e dar o "next".

Daqui para frente, vai instalar
o "VS Code" normalmente.

Eu vou cancelar, já que eu já tenho
instalado na máquina.

E aí, o "VS Code" está instalado,
está tudo certinho.

Agora, iremos fazer a instalação
do "Node" e do "Yarn".

Então, vamos para o site
do "Node"

para saber como vamos
fazer essa instalação.

Já no site do "Node",
também podemos buscá-lo no Google,

acessar o site
"nodejs.org".

E já temos na homepage também
o botãozinho de instalação.

Da mesma maneira
que fizemos com o "VS Code",

é só clicar
em "Descarregar o Node.js",

e faremos a instalação.

É bem rapidinho,
ele é um arquivo bem leve.

E ele também já gera
um executável para a gente.

Eu vou clicar
no executável,

ele vai analisar os requisitos
do meu computador.

E aí, a gente vai só
dando próximo,

também ler os termos e
aceitá-los, dando próximo,

e não tem segredo,
conseguimos fazer a instalação,

não precisa de nenhuma
configuração adicional.

Eu vou cancelar aqui,

já que eu também
já tenho o "Node" instalado.

Como eu sei que deu tudo certo
na instalação do "Node"?

Eu posso abrir o CMD
do meu sistema,

de acordo com o que você
estiver utilizando.

Nós vamos abrir o CMD.

Então, dependendo se você utiliza
Windows, Mac ou Linux,

o caminho vai ser diferente.

No meu caso,
eu estou utilizando o Windows.

Então, eu vou utilizar os caminhos
sempre do Windows.

Se você não souber alguma coisa,
é só procurar,

que cada sistema
tem seus caminhos,

mas o CMD é global,
vamos tê-lo em todos os sistemas.

Vamos voltar para a tela
e continuar a instalação do "Node".

Então, no Windows,
eu vou colocar:

"iniciar", "cmd",
que é o nosso command.

Para saber se deu certo
a instalação do "Node",

eu vou utilizar o comando
"node -v".

Dessa maneira, ele vai me trazer
a versão do "Node".

Trouxe a versão do "Node",
tudo certinho.

Além disso, ele traz o gerenciador
de pacotes padrão, que é o "npm",

que eu também posso usar
o mesmo comando

para conseguir ver se deu
tudo certinho na instalação.

Então, eu vou digitar "npm",
que é "Node Package Manager",

"npm -v",

e ele vai me dar
a versão do "npm".

Então, está tudo certinho,
tudo instalado.

E, por último,
nós vamos instalar o "Yarn",

que também
instalaremos via "Node",

então, vamos continuar
utilizando o CMD para isso.

Então, vamos para a tela.

Voltando ao terminal,
aumentei um pouco

o tamanho da fonte
para ficar melhor.

Vamos fazer
a instalação do "Yarn".

Qual é o comando
para instalar o "Yarn"?

"npm i", de install,
"-g", para instalar globalmente

e poder utilizar
em todos os projetos,

"yarn", e aí, vamos
apertar o enter.

Certinho.

Se deu tudo certo,
vamos utilizar o comando "yarn -v"

para visualizar
a versão dele.

Apareceu a versão,
tudo certinho.

Com isso, temos tudo instalado
para iniciar nosso projeto.