introducao next v16

Author: robertotcestari

apps/next-v16-fumadocs/content/docs/introducao/00-inicio.mdx

@@ -0,0 +1,35 @@
+---
+title: Quem sou eu
+---
+
+Fui Tech Lead de Front-end e responsável pelo currículo de Front-end, bem como pela liderança técnica de um time de mais de 20 pessoas em uma das maiores empresas de educação do país.
+
+Fui professor de Front-End para mais de 400 alunos em turmas formadas em uma grande escola de programação.
+
+Fundador e Professor do Codante
+
+Fundador e CTO do Trilhante, uma das maiores plataformas de ensino de direito do Brasil.
+
+Já tive experiência como fundador de outras startups. Sou graduado em Administração de Empresas pela EAESP-FGV, e graduado e mestre em Direito pela USP.
+
+Criador de scripts nas horas vagas.
+
+## Minha Stack
+
+- PHP e Laravel
+- Javascript - React
+- Webdesign - Figma
+- Apaixonado por Frontend, design e animação
+
+## Uses
+
+- **Editor** - VSCode com tema One Dark Pro Darker
+- **Terminal** - iTerm2
+- **Fonte** - Fira Code
+- **Browser** - Arc
+- **VSCode File Icons**
+- **Macbook Pro M4 Pro** - 48GB Ram + 512GB SSD
+- **Monitores** - Samsung 28" 4k e LG 34" 4k
+- **Teclado** - MX Keys Mechanical
+- **Mouse** - MX Master 3s
+- **Fone** - JBL 720BT

apps/next-v16-fumadocs/content/docs/introducao/02-quem-sou-eu.md

@@ -0,0 +1,41 @@
+---
+title: O que vamos aprender hoje
+---
+
+Na versão 16, o Next melhorou muito sua _developer experience_. Está muito mais fácil criar uma aplicação Next. Isso porque foi lançado um dos melhores recursos do Next, até hoje chamado de `Cache Components`.
+
+Você verá neste workshop que os componentes de cache - `cache components` - eram o que faltava para que a nova forma de fazer aplicações React (esse movimento começou com os RSCs) fizesse sentido.
+
+## 1. Cache Components
+
+Em primeiro lugar, o mais importante: Cache Components.
+
+Vamos criar uma aplicação simples usando esse recurso. Nessa parte finalmente vamos entender (à fundo) duas coisas fundamentais no Next.js:
+
+1. A diretiva `use cache`
+2. O que é PPR (Partial Pre Rendering) e como essa nova forma de renderizar faz sentido dentre todas as formas possíveis do Next.js.
+
+A API da implementação do novo cache no Next.js mudou bastante desde a concepção do `use cache`. Mas agora ela é estável e não muda mais 🎉.
+
+## 2. DevTools and MCP
+
+Se você está usando agentes de código, já deve ter percebido que muitos agentes e modelos não conseguem acompanhar a velocidade com que as novas atualizações do framework acontecem. Os modelos, além de terem um _cutoff_ no passado, não são eficientes para buscar informações sobre o framework.
+
+Por essa razão, o Next acabou de lançar um MCP. Além de trazer informações sobre como migrar uma aplicação Next para a última versão, a ferramenta também integra com o _dev server_ para fornecer aos modelos de IA os erros que estão ocorrendo em tempo real.
+
+## 3. Next Evals
+
+E falando de IA, a Vercel lançou uma página dedicada a avaliar os melhores modelos para se usar ao construir uma aplicação Next.js. É muito interessante 🧠
+
+## 4. Outros Updates
+
+- Build Adapters
+- File System CAching
+- Turbopack
+- Proxy.ts
+- Enhanced Routing
+- React Compiler Support
+
+## 5. Migrando para V16
+
+Vamos passar rapidamente pela documentação de upgrade do Next.js - isso vai trazer um overview das principais mudanças dessa versão.

apps/next-v16-fumadocs/content/docs/introducao/03-o-que-vamos-aprender-hoje.md

@@ -1,4 +1,4 @@
 {
   "title": "Introdução",
-  "pages": ["00-inicio", "01-introducao"]
+  "pages": ["01-introducao", "02-quem-sou-eu", "03-o-que-vamos-aprender-hoje"]
 }

apps/next-v16-fumadocs/content/docs/introducao/meta.json

@@ -0,0 +1,62 @@
+---
+title: Enhanced Routing
+---
+
+O Next.js 16 introduz melhorias significativas no sistema de roteamento, tornando a navegação mais previsível, performática e com melhor suporte a casos complexos.
+
+## Principais Melhorias
+
+### Dynamic Routes Mais Robustos
+
+- Melhor tratamento de parâmetros dinâmicos em rotas nested
+- Suporte aprimorado para catch-all segments (`[...slug]`)
+- Validação automática de tipos com `generateStaticParams`
+
+### Route Groups com Contexto Compartilhado
+
+- Layouts aplicados apenas a grupos específicos de rotas
+- Melhor isolamento de contextos entre grupos
+- Suporte a múltiplos layouts em paralelo
+
+### Middleware Mais Poderoso
+
+- Detecção automática de tipos em `NextRequest` e `NextResponse`
+- Melhor suporte a reescrita de URLs com preservação de query strings
+- Logging integrado para debugging de rotas
+
+## Padrões Recomendados
+
+### Organização com Route Groups
+
+```
+app/
+├── (auth)/
+│   ├── login/
+│   ├── register/
+│   └── layout.tsx
+├── (dashboard)/
+│   ├── overview/
+│   ├── analytics/
+│   └── layout.tsx
+└── api/
+```
+
+### Validação de Parâmetros
+
+Use `generateStaticParams` com tipagem forte para evitar rotas inválidas em build time:
+
+```typescript
+export async function generateStaticParams() {
+  const posts = await getPosts()
+
+  return posts.map((post) => ({
+    slug: post.slug,
+  }))
+}
+```
+
+## Migração Suave
+
+- Rotas antigas continuam funcionando normalmente
+- Combine padrões antigos e novos no mesmo projeto
+- Prefira novo padrão em novos recursos

apps/next-v16-fumadocs/content/docs/introducao/roberto-cestari.jpg

@@ -0,0 +1,101 @@
+---
+title: React Compiler Support
+---
+
+O Next.js 16 traz suporte estável para o React Compiler, uma ferramenta experimental do React que otimiza automaticamente componentes, reduzindo a necessidade de `useMemo` e `useCallback`.
+
+## O que é o React Compiler
+
+O React Compiler analisa seu código e:
+
+- Identifica automaticamente dependências de efeitos
+- Otimiza re-renders desnecessários
+- Memoiza valores sem necessidade de `useMemo`
+- Memoiza callbacks sem necessidade de `useCallback`
+
+## Como Ativar
+
+### Via next.config.js
+
+```javascript
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    reactCompiler: true,
+  },
+}
+
+module.exports = nextConfig
+```
+
+### Ativação Parcial (por arquivo)
+
+```javascript
+// next.config.js
+experimental: {
+  reactCompiler: {
+    compilationMode: 'annotation', // Requer "use memo" explícito
+  },
+}
+```
+
+Ou adicione `"use memo"` no início de arquivos específicos:
+
+```typescript
+'use memo'
+
+export default function Component() {
+  // Este componente será compilado
+}
+```
+
+## Comportamento Automático
+
+Com o compilador ativo, você pode simplificar código:
+
+### Antes
+
+```typescript
+export default function List({ items }) {
+  const sorted = useMemo(() => items.sort(), [items])
+
+  const handleClick = useCallback((id) => {
+    console.log(id)
+  }, [])
+
+  return <div>{sorted.map(item => ...)}</div>
+}
+```
+
+### Depois
+
+```typescript
+export default function List({ items }) {
+  const sorted = items.sort() // Compiler otimiza automaticamente
+
+  const handleClick = (id) => { // Compiler memoiza automaticamente
+    console.log(id)
+  }
+
+  return <div>{sorted.map(item => ...)}</div>
+}
+```
+
+## Considerações
+
+- Compilador é automático, não há mudanças necessárias no código existente
+- Compatível com código que já usa `useMemo` e `useCallback`
+- Pode resultar em builds ligeiramente mais lentos (compensado pela performance em runtime)
+- Ideal para aplicações com muitos componentes reativos
+
+## Limitações Conhecidas
+
+- Alguns padrões complexos podem não ser otimizados
+- Context API com valores mutáveis pode impactar eficácia
+- Ainda em evolução; novos padrões são suportados frequentemente
+
+## Próximos Passos
+
+- Monitore logs de compilação para ver otimizações aplicadas
+- Teste performance com DevTools do React
+- Reporte padrões não otimizados para a equipe do React

apps/next-v16-fumadocs/content/docs/outros-updates/06-enhanced-routing.md

@@ -5,6 +5,8 @@
     "02-build-adapters",
     "03-file-system-caching",
     "04-turbopack",
-    "05-proxy-routes"
+    "05-proxy-routes",
+    "06-enhanced-routing",
+    "07-react-compiler-support"
   ]
 }