Módulo 3 — Frontend com Next.js
Este módulo constrói o primeiro dos dois clientes do estudo de caso: uma aplicação web em React e Next.js (TypeScript), que consome a API REST construída no Módulo 2. O serviço não muda — o que muda é quem o consome.
A ordem das aulas é deliberada. O framework vem antes da biblioteca porque é ele que cria o projeto, define onde cada arquivo mora e decide em que máquina cada trecho de código roda; só faz sentido estudar componentes e estado depois de existir um lugar para colocá-los.
| # | Aula | O que acrescenta |
|---|---|---|
| 11 | Introdução ao Next.js | O projeto, o App Router, a fronteira servidor/cliente e as primeiras rotas |
| 12 | Fundamentos de React | Componentes, props, estado, eventos, composição e onde o estado mora |
| 13 | Dados da API | Chamadas à API do Módulo 2 pelo servidor e pelo navegador, layouts aninhados, carregamento, erro, estratégias de renderização e CORS |
| 14 | Formulários e cache | Estado na URL, paginação, Server Actions, desfechos de uma escrita e cache de leituras |
| 15 | Sessão, rotas protegidas e publicação | Login, sessão, proteção de rotas e build de produção |
Em construção
A aula 15 ainda não tem material próprio no site e é conduzida em aula. As aulas 11 a 14 estão publicadas.
Antes de começar
- Módulo 1, aula 3 — TypeScript. É a mesma linguagem dos dois lados, e a aula continua servindo de referência.
- Módulo 2, aula 4 — o contrato REST. O cliente web é escrito contra ele, e não contra a implementação.
- Módulo 2, aula 9 — o formato das respostas de
GET /livros, que é o formato usado pelas telas desde a aula 11. - Módulo 2, aula 10 — o projeto da API que o cliente web passa a consumir a partir da aula 13, na porta 3000.
Ambiente
Node 22 LTS, Next.js 16 (App Router), React 19.2 e npm. A tabela completa está na apresentação da disciplina.