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.