O que vamos aprender hoje

Vamos começar? Antes de mais nada, um overview do que iremos tratar no Workshop de hoje. Vamos em todo o workshop utilizar uma única aplicação de job board (que se chamará CodanteVagas) e que será completamente feita com Next.Js.

Se você não consegue esperar, já pode ir olhando no nosso Figma para ver a aplicação que será construída. O link é esse.

Os principais tópicos que iremos ver são:

00. Apresentação

O que é o Next.js
Por que Next.js
Um pouco de história

01. Setup de um Projeto `Next.js`

Apresentando o CodanteVagas
Criando o projeto Next.js
Next.js sem projeto nenhum é possível também
A estrutura de pastas de um projeto Next.js
O que é o turbopack?

02. Roteamento Básico no `Next.js`

Roteamento com a pasta app.
Os nomes reservados do roteamento no Next.js.
Criando as páginas do CodanteVagas
- Home Page
- Página de About/Sobre
- Página de Vagas
- Página de Cadastro de Vagas
Rota 404

03. Estilização

TailwindCSS
Usando uma biblioteca de componentes: shadcn/ui.
Estilizando nossa 404

04. Layouts e Páginas

Criando nosso layout
Layouts sem rota
Home e Sobre
Página de Vagas
Página de Cadastro

05. Componentes do `Next.js`

next/link
next/font
next/image
next/script
next/form

06. A teoria dos Server Components do React

O que são server components
use client vs use server
Regras dos server components

07. Fetch de Dados e Rotas Dinâmicas

Brincando com nossa API
Listando as vagas conectando com a API
Criando detalhes da vaga individual
Criando a página da vaga individual

08. Formulário e Server Actions

Nossa primeira server action
Apagando uma vaga
Inserindo nova vaga
Loading State e Erros

09. Responsividade da nossa aplicação

Vamos ajustar tudo para ficar responsivo.