vimeo.com/.../1007069050

O Next.js pode ser utilizado para diversas plataformas, com diversos

objetivos diferentes.

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

Na nossa jornada de aprendizado, nós iremos construir um blog

interativo, manipulando posts, gerenciando comentários e criando

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

Ao longo desse projeto, nós abordaremos de forma abrangente diversos

recursos do Next.js que são utilizados no dia a dia do mercado de

trabalho, como, por exemplo, a criação de um projeto do zero, 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 a gente vai 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 você

conheça um pouquinho de HTML e JavaScript e CSS utilizando Tailwind

CSS, que junto com uma biblioteca chamada DayZUI, 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, Zodi, e algumas são bem comuns no mundo do front-end.

Além disso, você precisa ter algumas coisinhas instaladas na sua

máquina.

O que a gente vai usar para o nosso projeto?

E para utilizar essas ferramentas, você vai precisar de algumas

coisas instaladas no seu computador.

Uma delas é o Node.js, a partir da versão 18, para garantir que

tudo vai funcionar certinho, e nós vamos utilizar um gerenciador de

dependências chamado Yarn.

Além disso, nós vamos utilizar também o VSCode 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 VSCode, você pode chegar digitando code.visualstudio

.com ou pelo próprio Google.

Na home page, 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í a gente vem aqui no botãozinho Download for

Windows.

É só clicar no arquivo executável que ele está baixando, aqui ele

está me dando um aviso que a gente vai rodar o VSCode, mesmo não

sendo administrador da máquina, e está tudo bem.

Eu vou colocar aqui o OK, e vou colocar, ele está me dando uma

mensagem que eu já tenho instalado, mas eu ainda vou continuar, só

para mostrar para vocês um pouquinho do processo.

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

Dá o Next, aqui ele vai mostrar onde que a pastinha 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 a gente, para qualquer arquivo ou pass que a gente quiser

abrir, a gente vai ter a opção, ao clicar com o botão direito, de

abrir direto no VSCode.

Então, é uma praticidade que ajuda bastante a gente na utilização no

dia a dia.

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

dá o Next.

Daqui para frente, ele vai instalar o VSCode normalmente, eu vou

cancelar, já que eu já tenho instalado na máquina, e aí o VSCode está

instalado, está tudo certinho.

Agora, nós iremos fazer a instalação do Node e do Yarn.

Então, bora para o site do Node para saber como que a gente vai

fazer essa instalação.

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

nodejs.org, a gente já tem na Homepage também o botãozinho de

instalação.

Então, da mesma maneira que a gente fez com o VSCode, é 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, e dando próximo, e não tem segredo, a gente consegue

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 o 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, a

gente vai ter ele em todos os sistemas.

Então vamos voltar para a tela, para a gente continuar a instalação

do Node.

Então no Windows eu vou colocar, iniciar cmd, que é o nosso command.

E aí para eu saber se deu certo a instalação do Node, eu vou

utilizar o comando node espaço tracinho 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 a gente conseguir ver

se deu tudo certinho na instalação.

Então eu vou digitar npm, que é Node Package Manager, espaço menos 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 a gente vai continuar utilizando o cmd para isso.

Então, bora para a tela.

Voltando ao terminal, eu aumentei um pouquinho o tamanho da fonte

para ficar melhor de ver.

A gente vai fazer a instalação do yarn, qual que é o comando para

instalar o yarn?

É npm i, de install, menos g, para a gente instalar globalmente,

poder utilizar em todos os projetos, yarn, e aí a gente vai apertar o

enter, certinho.

Se deu tudo certo, a gente vai utilizar o comando yarn menos v, para

visualizar a versão dele, apareceu a versão, tudo certinho.

Com isso, temos tudo instalado para iniciar nosso projeto.