Curso Completo de Next.js
Construa o Frontend do Restaurantix - Dashboard moderno consumindo a API Bun.js com Next.js 14, Tailwind CSS, shadcn/ui, Zustand, Zod e React Hook Form.
Por que isso é importante
Curso Next.js: App Router, Tailwind e shadcn/ui — fullstack JS com UI moderna no seu repo.
Leitura relacionada: Cursos CrazyStack · Tutorial shadcn · Curso React · Next.js 16.
🎯 O que você vai construir
Um dashboard completo para gerenciar restaurantes com autenticação, gestão de pedidos, métricas em tempo real, sistema de notificações e interface moderna responsiva.
Fundamentos e Setup
Setup do projeto com Next.js 14, TypeScript, Tailwind CSS e configuração do App Router.
Configuração do Tailwind CSS e shadcn/ui para criar componentes modernos e reutilizáveis.
Estrutura de pastas, organização de componentes e configuração do ambiente de desenvolvimento.
Autenticação e Estado Global
Implementação de login com magic links, middleware de autenticação e proteção de rotas.
Gerenciamento de estado com Zustand: store de usuário, persistência e middleware.
Cliente HTTP para consumir a API Bun.js com React Query para cache e sincronização.
Formulários e Validação
Formulários performáticos com React Hook Form e validação type-safe com Zod.
Formulários avançados: arrays dinâmicos, upload de arquivos e validação condicional.
Loading states, toast notifications, skeleton loading e feedback visual para melhor UX.
Dashboard e Visualização
Criação de dashboard com gráficos, cards de métricas e visualização de dados em tempo real.
Interface completa para gerenciar pedidos: listagem, filtros, paginação e mudança de status.
Deploy na Vercel, otimizações de performance, SEO e configuração de domínio personalizado.
Stack Tecnológica Moderna
Next.js 14
App Router + Server Components
Tailwind + shadcn/ui
Design system moderno
Zustand + React Query
Estado global e cache
React Hook Form + Zod
Formulários type-safe
Perguntas frequentes
O curso Next.js cobre App Router?
Sim — App Router, Tailwind e shadcn/ui no fluxo moderno.
Serve para quem já sabe React?
Ideal. Se React está fraco, faça a base antes.
Tem projeto real?
O foco é build prático com deploy e padrões de produção.
shadcn é obrigatório?
É o caminho do curso para UI. Você leva o código no repo.