Next.js · 2026-07-12

Next.js 16 com Agentes de IA: App Router e Server Components

Tutorial completo de Next.js 16 com agentes de IA. Aprenda a usar Claude Code e Codex para criar aplicacoes com App Router, Server Components, Streaming e Server Actions.

Next.js 16 e a versao mais recente do framework React para producao, trazendo Server Components como padrao, Streaming nativo, Server Actions aprimoradas e Partial Prerendering. Quando combinado com agentes de IA, o Next.js agentes IA se torna uma maquina de produtividade. Este tutorial mostra como usar Claude Code e Codex para criar aplicacoes Next.js 16 com App Router — do setup ao deploy.

Sumario

Setup do Next.js 16 com Claude Code
App Router e Server Components com Claude Code
Server Actions com Codex
Streaming e Suspense com agentes de IA
Exemplo pratico: Dashboard com Server Components
FAQ — Perguntas Frequentes
Comece com Next.js 16 e agentes hoje

Setup do Next.js 16 com Claude Code

A maneira mais rapida de iniciar um projeto Next.js 16 Claude Code e pedir ao agente para configurar tudo:

Criacao do projeto

claude "Crie um projeto Next.js 16 com TypeScript, App Router e Tailwind CSS. Use create-next-app com as opcoes: TypeScript habilitado, ESLint, Tailwind CSS, App Router, import alias '@/*'. Nome do projeto: dashboard-app."

Claude Code executa npx create-next-app@latest com todas as flags corretas para Next.js 16.

Verificacao da versao

Confirme que a versao instalada e a 16:

claude "Verifique a versao do Next.js instalada no projeto. Leia o package.json e confirme que next esta na versao 16.x. Se estiver em versao anterior, atualize com npm install next@latest."

Estrutura inicial

Após o setup, a estrutura gerada segue as convencoes do App Router:

dashboard-app/ ├── src/ │ ├── app/ │ │ ├── layout.tsx (layout raiz com HTML e body) │ │ ├── page.tsx (pagina inicial) │ │ └── globals.css (estilos globais) │ └── ... ├── next.config.ts ├── tsconfig.json ├── tailwind.config.ts └── package.json

App Router e Server Components com Claude Code

No Next.js 16, Server Components sao o padrao. Isso significa que componentes gerados por Claude Code nao precisam da diretiva use client a menos que usem hooks, eventos ou estado.

Criando uma pagina com Server Component

claude "Crie a pagina src/app/dashboard/page.tsx que: - E um Server Component (sem 'use client') - Importa dados de forma assincrona de uma funcao getTasks() - Renderiza uma lista de tarefas com titulo, status e data - Usa o componente TaskCard para cada tarefa - Inclui loading state com Suspense"

Componente loading

Claude Code entende a convencao de arquivos especiais do App Router:

claude "Crie src/app/dashboard/loading.tsx com um esqueleto de carregamento. Use Tailwind CSS para animacao de pulse nos cards. E um Server Component."

Layout aninhado

claude "Crie src/app/dashboard/layout.tsx com: - Sidebar com navegacao (Overview, Tarefas, Configuracoes) - Header com nome do usuario e avatar - A prop children renderiza o conteudo da pagina - E um Server Component, sem useState (use useMemo ou components Client)"

Client Component (quando necessario)

Para componentes interativos, Claude Code adiciona a diretiva use client automaticamente:

claude "Crie src/components/TaskForm.tsx (Client Component com 'use client'). E um formulario de criacao de tarefa com: - Campos: titulo, descricao, prioridade - Validacao com react-hook-form + zod - Submit via Server Action importada de @/app/actions - Feedback visual de sucesso/erro com useState"

Server Actions com Codex

Server Actions sao uma das features mais poderosas do Next.js 16, e Codex e excelente para gera-las.

Actions de tarefas

opencode "Crie src/app/actions/task-actions.ts com Server Actions: - createTask(formData: FormData): cria tarefa no banco (Prisma ou mock), valida campos, retorna { success, task } ou { error } - updateTask(id: string, formData: FormData): atualiza campos - deleteTask(id: string): deleta tarefa - completeTask(id: string): marca como concluida Todas devem ser async e usar 'use server' no topo do arquivo. Use revalidatePath('/dashboard') apos cada operacao."

Action de autenticacao

opencode "Crie src/app/actions/auth-actions.ts: - login(email: string, password: string): valida credenciais, cria sessao com next-auth ou iron-session, retorna { success } ou { error } - logout(): encerra sessao, redireciona para / - register(name: string, email: string, password: string): cria usuario Use 'use server' e trate erros com try/catch."

Com Server Actions, voce elimina a necessidade de criar rotas de API para operacoes CRUD simples. O Codex gera as actions com a validacao e o revalidatePath corretos.

Streaming e Suspense com agentes de IA

Next.js 16 oferece streaming nativo com React 19 Suspense. Claude Code pode estruturar componentes que fazem streaming de dados de forma elegante.

Pagina com streaming

claude "Crie src/app/dashboard/analytics/page.tsx com streaming: - Use Suspense com fallback para cada seccao - Seccao 1: Card com total de tarefas (fetch rapido, sem suspense) - Seccao 2: Grafico de tarefas por status (fetch medio, com suspense boundary) - Seccao 3: Lista de atividades recentes (fetch lento, suspense separado) - Cada seccao e um Server Component assincrono separado."

O resultado e uma pagina que carrega progressivamente — o usuario ve o conteudo mais rapido primeiro, enquanto os dados mais pesados chegam em segundo plano.

Exemplo pratico: Dashboard com Server Components

Vamos unir tudo em um dashboard funcional de gerenciamento de tarefas.

Estrutura completa com Claude Code

claude "Crie a estrutura completa do dashboard: - src/app/dashboard/page.tsx: pagina principal com resumo - src/app/dashboard/tasks/page.tsx: listagem com filtros - src/app/dashboard/tasks/[id]/page.tsx: detalhe da tarefa - src/app/dashboard/layout.tsx: layout com sidebar - src/components/TaskCard.tsx: card de tarefa (Server Component) - src/components/TaskForm.tsx: formulario (Client Component) - src/app/actions/task-actions.ts: Server Actions - src/lib/db.ts: acesso ao banco (Prisma ou mock array)"

Dados mockados com Codex

opencode "Crie src/lib/mock-data.ts com 8 tarefas de exemplo: - IDs diferentes, status variados (pending, in_progress, completed) - Datas variadas nos ultimos 7 dias - Prioridades: 2 low, 3 medium, 2 high, 1 critical - Exporte a funcao getMockTasks() que retorna Promise<Task[]> simulando um delay de 500ms"

Com Claude Code e Codex orquestrados, voce tem um dashboard Next.js 16 completo em menos de uma hora — Server Components para performance, Client Components para interatividade, Server Actions para mutations, e Streaming para carregamento progressivo.

FAQ — Perguntas Frequentes

Next.js 16 tem mudancas significativas em relacao ao 14/15?

Sim. Next.js 16 introduz melhorias no App Router, Server Components por padrao em todas as paginas, streaming nativo com React 19 Suspense, Server Actions mais seguras e o novo Partial Prerendering (PPR). Claude Code e Codex ja conhecem essas novidades e geram codigo compativel.

Preciso usar o App Router ou ainda da para usar Pages Router?

Next.js 16 recomenda fortemente o App Router. O Pages Router ainda existe para compatibilidade, mas todas as features novas (Server Components, Streaming, PPR) so estao disponiveis no App Router. Agentes de IA geram codigo para App Router por padrao.

Como Claude Code lida com Server Components vs Client Components?

Claude Code entende a diferenca e adiciona a diretiva "use client" automaticamente quando o componente precisa de hooks, eventos ou estado. Se voce nao especificar, ele gera Server Components por padrao — que e a abordagem correta no Next.js 16.

Agentes de IA conseguem configurar autenticacao no Next.js 16?

Sim. Claude Code pode configurar NextAuth.js/Auth.js, middleware de protecao de rotas, layout para paginas autenticadas e Server Actions seguras. Basta especificar o provedor (Google, GitHub, credentials) no prompt.

O Orquestra funciona bem com o dev server do Next.js?

Sim. O Orquestra no Windows 11 executa o terminal npm run dev normalmente. O HMR (Hot Module Replacement) funciona perfeitamente. Voce pode ter o Claude Code gerando componentes em um terminal enquanto o servidor Next.js roda em outro.

Comece com Next.js 16 e agentes hoje

Next.js agentes IA e a combinacao definitiva para desenvolvimento web moderno. Server Components, Server Actions, Streaming e o App Router formam um ecossistema que os agentes de IA entendem profundamente.

O Orquestra potencializa essa experiencia com terminais lado a lado para Claude Code e Codex, sincronizacao automatica de arquivos e suporte nativo ao Windows 11.

Baixe o Orquestra para Windows 11 e comcece seu teste gratis de 7 dias.

Links internos recomendados

TypeScript React com Agentes de IA — componentes React que funcionam perfeitamente com Next.js
APIs REST com Agentes de IA — crie as Route Handlers do Next.js
Banco de Dados com Agentes de IA — integre Prisma ou Drizzle no Next.js

Links externos recomendados

Next.js 16 Documentation — documentacao oficial do Next.js
React Server Components — documentacao oficial dos Server Components
Tailwind CSS — utilitarios CSS usados no tutorial

Pronto para orquestrar seus agentes?

Baixe o Orquestra para Windows 11 e comece a coordenar seus agentes de IA em um canvas infinito. Gratis por 7 dias.

Começar teste grátis