wip - next intro

apps/next-introdutorio/astro.config.mjs

@@ -32,7 +32,7 @@ export default defineConfig({
         {
           label: 'Intro ao NextAuth',
           autogenerate: {
-            directory: '01-intro-nextauth',
+            directory: '01-intro-next',
           },
         },
         {

apps/next-introdutorio/src/content/docs/00-intro/02-o-que-vamos-aprender.md

@@ -2,55 +2,34 @@
 title: Conteúdo do Workshop
 ---
 
-TODO: REFAZER
+Vamos mergulhar em profundidade nas principais funcionalidades do framework e ecossistema do Next. 
 
+## 01. App Router
 
-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 que possuirá **várias formas de autenticação utilizando a biblioteca Auth.js (NextAuth)**.
-
-## O que vamos aprender hoje?
-
-Os principais tópicos que iremos ver são:
-
-#### 01. Intro ao NextAuth.js
-
-- A nova versão 5 (auth.js)
-- O que são sessões
-- O que são providers
-- O que são adapters
-- O que são callbacks
-- O que são eventos
-
-
-#### 02. Setup do NextAuth.js no projeto
-
-- Instalando o NextAuth
-- Instalando a base de dados (Prisma)
-- Configurando o NextAuth
-- Entendendo o fluxo de login
-- Login nativo / simples com credenciais 
-
-#### 03. Login com credenciais Server e Client Side
-
-- Página de login customizada
+- Roteamento
+- Layouts
 - Erros
-- Client e Server Side (server components)
+- Loading State
+
+## 02. Client e Server Components
 
-#### 04. Login com Github
+Vamos entender as diferenças e casos de uso para componentes de cliente e componentes de servidor. 
 
-- Criando um app OAuth no Github
-- Adicionando o provider Github
-- Configurando o form e action
+## 03. Ecossistema Oficial
 
-#### 05. Login com Magic Link (email)
+O Next.js traz algumas bibliotecas para tanto facilitar o desenvolvimento como para melhorar performance das páginas como um todo. 
 
-- Adicionando um provedor de email
-- Configurando o formulário e action
+- `next/link`
+- `next/image`
+- `next/font`
+- `metadata`
+
 
-#### 06. Usando dados da Sessão
+## 04. Data fetching e Server Actions
 
-- Exibindo dados do usuário
-- Protegendo rotas
+- Fetch de dados dinâmicos
+- Mutação de dados usando `server actions`. 
 
-#### 07. Callbacks para adicionarmos mais dados na sessão
+## 05. Básico de Estilização
 
-- Adicionando dados adicionais do GitHub na sessão
+Para estilização vamos utilizar *tailwindcss* para nossa aplicação - mas podemos utilizar quaisquer estratégias que quisermos

apps/next-introdutorio/src/content/docs/00-intro/04-repositorio.md

@@ -2,19 +2,6 @@
 title: Repositório e Aplicação usados
 ---
 
-TODO: Colocar aqui o repositório usado
-
-Como já falamos por aqui, vamos usar uma aplicação simples em que teremos poucas páginas:
-
-- Uma página `home` com os botões para autenticação com diversos métodos;
-- Uma página `dashboard` que deverá ser protegida e apenas acessada por usuários logados. Nesta página também teremos o botão de `logout`.
-- Uma página `register` para cadastro de novos usuários com email e senha;
-- Páginas de `login` para cada um dos métodos de autenticação que iremos utilizar.
-
-A página inicial da aplicação é essa:
-
-![Página do App](../../../assets/images/app1.png)
-
 ### Link do Repositório
 
-O repositório do exemplo da aula pode ser encontrado neste link: [https://github.com/robertotcestari/workshop-codante-next-auth](https://github.com/robertotcestari/workshop-codante-next-auth)
+O repositório do exemplo da aula pode ser encontrado neste link: [link aqui](link aqui)

apps/next-introdutorio/src/content/docs/00-intro/05-a-aplicacao.md

@@ -0,0 +1,46 @@
+---
+title: O que vamos construir neste Workshop
+---
+
+Vamos criar um *job board*. Essa será uma aplicação em que um usuário será capaz de procurar vagas, cadastrar novas vagas e visualizar detalhes de vagas de emprego. Além de páginas estáticas `home` e `sobre`. 
+
+
+## Protótipos
+
+É mais fácil entender com os protótipos:
+
+
+### Home
+
+Esta é a raiz da aplicação, a landing page. Note que há basicamente três seções (que continuam ao longo de toda a aplicação):
+
+- Navbar
+- Main
+- Footer
+
+
+![Home](./Home.png)
+
+### Sobre
+
+Na página sobre, vamos entender na prática sobre o novo roteamento da pasta `app` do Next.js
+
+![Sobre](./About.png)
+
+### Busca de Vagas
+
+Vamos para dados dinâmicos! Entender *data fetching* com o Next.js, exibição de dados e, *quem sabe*, uma busca!
+
+![Jobs](./Jobs.png)
+
+### Cadastro de Vagas
+
+Esta seção trará tudo sobre Server Actions! Vamos fazer *mutação* de dados de acordo com as melhores práticas e de forma moderna do React e deixando mais tênue a linha divisória entre *backend* e *frontend*.
+
+![New Job](./NewJob.png)
+
+### Detalhes de Vaga
+
+Aqui vamos deixar nossa aplicação mais funcional - nosso usuário precisa de mais informações sobre a vaga - e é isso que iremos trazer aqui. 
+
+![Job](./Job.png)

apps/next-introdutorio/src/content/docs/01-intro-next/01-Introdução.md

@@ -0,0 +1,33 @@
+---
+title: Por que Next.Js?
+---
+
+Por qual razão o Next.js se tornou um dos frameworks *frontend* mais populares dos últimos anos? E porque é utilizado sem ressalvas nas maiores aplicações em produção?
+
+## Um pouco de história...
+
+O Next.js surgiu em 2016 e fez parte de um movimento natural da web. 
+
+### A era das páginas estáticas (1990 - 1999)
+
+1. HTML e links
+2. PHP e HTML gerado no servidor
+3. Javascript e início de interatividade (popups, mensagens que apareciam)
+4. Ajax - precursor dos frameworks javascript
+
+![Geocities](./geocities.png)
+
+### A era do Javascript (2000 - 2015)
+
+1. Aplicações cada vez mais complexas - e *como era difícil fazer tudo com JS*
+2. Surgimento do Angular e do React (seguido por Vue)
+3. Adoção da componentização e renderização no cliente como forma de fazer a web. Facilidade de hospedagem - JAMStack.
+4. Nem tudo que precisávamos estava na linguagem oficial (e muito menos nos browsers) -> precisamos de bundlers! CRA como solução
+5. Problemas: SEO, JS grande para o hardware dos usuários, lentidão.
+
+### A era do Next (2016 - Atualmente)
+
+1. Next.js é o framework que combina as melhores características de diferentes eras do desenvolvimento web: simplicidade dos documentos estáticos, poder da renderização no servidor, componentização do React e boa experiência do usuário das SPAs.
+2. Next.js simplifica a criação de páginas, rotas e APIs, além de recursos como geração estática, renderização no servidor e carregamento sob demanda.
+3. Menciona funcionalidades como code splitting, otimização de imagens e Incremental Static Regeneration (ISR), que melhoram performance, SEO e experiência do usuário.
+4. Finaliza destacando o Next.js como uma solução completa para criação de web apps, combinando inovações de décadas em um único framework.