Workshop

Introdução ao Next.js

O Next.js é o maior framework de React da atualidade. Ele é utilizado para criar aplicações front-end ou full-stack e tem várias funcionalidades interessantes que justificam sua popularidade.

A empresa por trás do framework, a Vercel, é responsável por desenvolver suas funcionalidades e também oferece uma infraestrutura para que você possa hospedar sua aplicação lá.

Em 2023, o framework decidiu abraçar e apostar no SSR (server-side rendering) como padrão. E ele faz isso "abandonando" seu getServerSideProps e mergulhando de cabeça nos Server Components (a partir da versão 18 do React).

Uma outra novidade, introduzida na versão 13 do framework, é um novo router (a nova app folder) que foi desenhado do zero e é muito mais poderoso do que a antiga pages folder.

O que vamos aprender

01. Setup de um Projeto Next.js

  • O que é o Next.js
  • Por que Next.js
  • Apresentando o CodanteVagas
  • Criando o projeto Next.js
  • A estrutura de pastas de um projeto Next.js
  • Como importar um script JS puro no Next.js?
  • O que é o turbopack?

02. Roteamento no Next.js

  • Roteamento com a pasta app.
  • Como era antes?
  • 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 Vaga Individual
    • Página de Cadastro de Vagas

03. Estilização

  • TailwindCSS
  • Usando uma biblioteca de componentes: shadcn/ui.
  • E CSS Puro?

04. Componentes do Next.js

  • next/image
  • next/font
  • next/script
  • next/meta

05. A teoria dos Server Components do React

  • use client vs use server
  • Componente Cliente vs Componente de Servidor
  • Fetch de dados - cliente vs servidor
  • Server Actions
  • Hooks auxiliares

06. Fetch de Dados - Página de vagas

  • Listando as vagas conectando com a API

07. Formulário e Server Actions

  • Criando o Formulário
  • Server Actions para enviar o formulário
  • Erros e validação

08. Responsividade da nossa aplicação

  • Vamos ajustar tudo para ficar responsivo.

09. Finalização

Pré requisitos

É necessário conhecimento básico/intermediário em React e JavaScript. Se você ainda não estudou a base do desenvolvimento web, recomendamos que não comece logo em um framework como o Next.js.