next intermediario

apps/next-intermediario/.gitignore

@@ -0,0 +1,22 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+.vercel

apps/next-intermediario/README.md

@@ -0,0 +1,3 @@
+# Guia - Next Introdutório
+
+Guia construído com [Starlight](https://starlight.astro.build) para workshop do codante de Next Introdutório. 

apps/next-intermediario/astro.config.mjs

@@ -0,0 +1,101 @@
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+import tailwind from '@astrojs/tailwind';
+
+// https://astro.build/config
+export default defineConfig({
+  base: '/next-intermediario/',
+  integrations: [
+    tailwind({ applyBaseStyles: false }),
+    starlight({
+      favicon: '/favicon.png',
+      title: 'Next.js Intermediário',
+      editLink: {
+        baseUrl:
+          'https://github.com/codante-io/guias/edit/main/apps/next-intermediario/',
+      },
+      social: {
+        github: 'https://github.com/robertotcestari',
+        'x.com': 'https://x.com/robertotcestari',
+        linkedin: 'https://www.linkedin.com/in/robertotcestari/',
+        email: 'mailto:[email protected]',
+      },
+      // customCss: ['./src/custom.css'],
+      expressiveCode: {
+        themes: ['github-light'],
+      },
+      sidebar: [
+        {
+          label: 'Intro ao Workshop',
+          autogenerate: {
+            directory: '00 - introducao',
+          },
+        },
+
+        {
+          label: 'Setup do Projeto',
+          autogenerate: {
+            directory: '01 - Setup do Projeto',
+          },
+        },
+        {
+          label: 'Integrando uma Base de Dados',
+          autogenerate: {
+            directory: '02 - Roteamento Básico',
+          },
+        },
+
+        {
+          label: 'Middleware',
+          autogenerate: {
+            directory: '03-middleware',
+          },
+        },
+        {
+          label: 'Rotas de API no Next.js',
+          autogenerate: {
+            directory: '03a - Layouts e Páginas',
+          },
+        },
+        {
+          label: 'Estado na URL - Query Params',
+          autogenerate: {
+            directory: '04 - Componentes do Next',
+          },
+        },
+        {
+          label: 'Suspense e Server Components',
+          autogenerate: {
+            directory: '05 - teoria dos server components',
+          },
+        },
+        {
+          label: 'Fetch de Dados e Rotas Dinâmicas',
+          autogenerate: {
+            directory: '06 - Fetch de Dados e Rotas Dinâmicas',
+          },
+        },
+        {
+          label: 'Server Actions e Formulários',
+          autogenerate: {
+            directory: '07 - Server Actions e Formulários',
+          },
+        },
+        {
+          label: 'Responsividade da Aplicação',
+          autogenerate: {
+            directory: '08 - Responsividade da Aplicação',
+          },
+        },
+        {
+          label: 'Finalização',
+          autogenerate: {
+            directory: '09 - Finalização',
+          },
+        },
+      ],
+    }),
+    tailwind({ applyBaseStyles: false }),
+  ],
+});

apps/next-intermediario/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "next-intermediario",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check --minimumSeverity warning && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/starlight": "^0.31.1",
+    "@astrojs/starlight-tailwind": "^3.0.0",
+    "@astrojs/tailwind": "^5.1.5",
+    "astro": "^5.1.9",
+    "sharp": "^0.33.4",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.4.5"
+  }
+}

apps/next-intermediario/public/about.txt

@@ -0,0 +1,6 @@
+This favicon was generated using the following graphics from Twitter Twemoji:
+
+- Graphics Title: 1f47e.svg
+- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
+- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f47e.svg
+- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

apps/next-intermediario/public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

apps/next-intermediario/src/content.config.ts

@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+import { docsSchema } from '@astrojs/starlight/schema';
+import { docsLoader } from '@astrojs/starlight/loaders';
+
+export const collections = {
+  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+};

apps/next-intermediario/src/content/docs/00 - introducao/01-introducao.md

@@ -0,0 +1,8 @@
+---
+title: Boas vindas 
+---
+
+Este guia/website foi preparado para que você possa acompanhar o Workshop de forma mais eficaz!
+Qualquer dúvida, sugestão ou correção, ficarei muito feliz se você enviar uma Issue ou um PR para este repositório.
+
+Vamos com tudo!

apps/next-intermediario/src/content/docs/00 - introducao/02-o-que-vamos-aprender.md

@@ -0,0 +1,78 @@
+---
+title: O que vamos aprender hoje
+---
+
+
+
+## 00. Apresentação
+
+- O que vamos aprender
+- Links úteis
+
+## 01. Setup do Projeto
+
+- Repositório Inicial
+- O que será feito hoje
+
+## 02. Middleware
+
+- Adicionando um Modo de Manutenção
+
+## 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.
+
+## 10. Finalização

apps/next-intermediario/src/content/docs/00 - introducao/03-pre-requisitos.md

@@ -0,0 +1,9 @@
+---
+title: Pré requisitos
+---
+
+Vamos aprender **Next.js** versões 15+ do zero. Para que você consiga aproveitar o máximo esse workshop recomendamos que você possua:
+
+- Conhecimento intermediário sobre React
+- Conhecimento básico sobre Server Components (não é totalmente necessário conhecimento, vamos retomar Server Components no Workshop)
+- Conhecimento básico sobre Typescript - o projeto prático do workshop será todo feito com Next.Js usando Typescript.

apps/next-intermediario/src/content/docs/00 - introducao/04-repositorio.md

@@ -0,0 +1,28 @@
+---
+title: Links - Repo, API, Aplicação e Figma
+---
+
+Como já falamos por aqui, vamos usar uma aplicação simples em que teremos poucas páginas:
+
+- Uma página `home` com a landing page do CodanteVagas;
+- Uma página `sobre` que é estática e apenas tem um texto com mais informações da empresa;
+- Uma página de listagem de `vagas` em que serão listadas todas as vagas;
+- Uma página de `cadastro de vagas` para adicionar uma nova vaga;
+- Uma página `vaga individual` que mostrará os detalhes daquela vaga bem como um botão para apagar a vaga
+
+## Link da aplicação funcionando
+
+<!-- TODO: Adicionar aplicação funcionando -->
+Você poderá ver uma aplicação pronta funcionando [aqui nessa URL](https://job-board-six-gamma.vercel.app/)
+
+## Link do Figma do design do projeto
+
+Você poderá ver o Figma da aplicação [aqui nessa URL](https://www.figma.com/design/bzOxaC7cA5Y69VnWYAqApP/Next-Intro?node-id=27-302&t=S7ZRnDDCrRPAGXJy-1)
+
+## Repositório final
+
+Se você quiser consultar o repositório da aplicação pronta funcionando, [esse é o repositório](https://github.com/codante-io/ws-next-intro-app-final)
+
+## API utilizada
+
+Vamos utilizar uma API de vagas que foi feita pelo Codante. Para mais informações, acesse a [documentação da API](https://docs.apis.codante.io/jobs-api).

apps/next-intermediario/src/content/docs/00 - introducao/05-o-que-e-next-js.md

@@ -0,0 +1,23 @@
+---
+title: O que é o Next.js?
+---
+
+O *Next.js* é um frameworks para React focado em performance e facilidade para desenvolvimento.
+
+Além de ser um **framework** que implementa as mais novas funcionalidades do React, o *Next.js* também traz uma coleção de componentes que permite, de forma fácil, que sua aplicação seja performática, acessível e use as melhores práticas.
+
+## Quando a gente fala de Next.js, a gente fala do que?
+
+- Roteamento baseado em arquivos;
+- SSR - Renderização no Servidor (SSR é o principal mas podemos escolher outras formas)
+- Backend + Frontend (para isso é necessário um servidor)
+- Otimizações e performance
+  - Imagens
+  - Code Splitting
+  - SEO
+  - Carregamento rápido e boas métricas de performance
+- E, a partir do Next.JS 13 - Server Components
+
+## Funcionalidades segundo a Vercel
+
+![alt text](image.png)

apps/next-intermediario/src/content/docs/00 - introducao/06-por-que-next-js.md

@@ -0,0 +1,23 @@
+---
+title: Por que usar Next.js?
+---
+
+Em software é muito difícil dizer que uma coisa é melhor que a outra - existem ferramentas certas para cada problema que se apresenta.
+
+Mesmo assim, hoje em dia, com o aumento da complexidade das aplicações web (que rodam no navegador), a minha opinião é de que não vale muito a pena começar um projeto do zero sem algum tipo de framework.
+
+Usar um framework facilita o processo de desenvolvimento e aumentam as chances de que você esteja usando boas práticas e que seu código seja inteligível para outras pessoas.
+
+* **Desenvolvimento Rápido**
+  * Configuração pronta para uso.
+  * Foco na lógica da sua aplicação, não na configuração.
+* **Desempenho Otimizado**
+  * **Server-Side Rendering (SSR) e Static Site Generation (SSG)**
+  * **Code Splitting**
+  * **Otimização de Imagens**
+  * **Otimização de Fontes**
+* **Boa DX (Development Experience):**
+  * **Roteamento baseado em arquivos**
+  * **API Routes**
+  * **Comunidade e ecossistema**
+* **Escalabilidade**

apps/next-intermediario/src/content/docs/00 - introducao/06-um-pouco-de-historia.md

@@ -0,0 +1,51 @@
+---
+title: Um pouco de história
+---
+
+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?
+
+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. Traz também funcionalidades como code splitting, otimização de imagens e Incremental Static Regeneration (ISR), que melhoram performance, SEO e experiência do usuário.
+
+Em conclusão, Next.js teve esse forte apelo porque trouxe uma convergência de soluções para as necessidades tanto de (i.) sites mais rápidos e leves como (ii.) aplicações mais interativas e poderosas.
+
+## O futuro do Next.js
+
+- **Foco em Server Components:**
+  - Aprimorar performance e experiência do usuário.
+  - Melhor uso de recursos do servidor.
+  - Streaming de UI e renderização mais rápida.
+- **Server Actions:**
+  - Interação totalmente nova entre _front_ e _backend_
+  - Simplifica acesso a bancos de dados e APIs externas.
+- **React 19:**
+  - Otimizações para Server Components e performance.
+- **Integração Frontend/Backend:**
+  - Next.js busca integrar as camadas de forma mais profunda.
+  - Potencial para simplificar o desenvolvimento e melhorar a performance.
+- **Observações:**
+  - Ecossistema de Server Components ainda em estágio inicial.
+  - Desafios e novas abordagens devem surgir ao longo do tempo.
+  - Dificuldade de se manter atualizado 🤯