Destino Dev

Cursos

SaaS Dashboard com Next.js + Clerk Auth + Dark Mode + i18n

Código do curso: github.com/johnpires/saas-dashboard-nextjs-clerk

Construa do zero um SaaS Dashboard completo com Next.js 14 App Router, autenticação profissional com Clerk, Dark Mode com Tailwind CSS e internacionalização (i18n) com next-intl. Projeto real hands-on com deploy na Vercel.

Conteúdo do curso

Módulo 1: Introdução e Setup

Visão geral do projeto, configuração do ambiente e estrutura inicial do SaaS Dashboard com Next.js 14.

  1. O que vamos construir — Visão Geral do SaaS Dashboard (3 min)
  2. Configurando o Ambiente de Desenvolvimento (2 min)
  3. Estrutura do Projeto — Organização de Pastas e Arquivos (4 min)

Módulo 2: Autenticação com Clerk

Integração completa do Clerk para autenticação: login, registro, perfil de usuário e proteção de rotas.

  1. Configurando Clerk no Next.js 14 (2 min)
  2. Páginas de Login e Registro com Clerk (8 min)
  3. Middleware de Autenticação e Rotas Protegidas (2 min)
  4. UserButton, Perfil e SignOut no Header (2 min)

Módulo 3: Layout e Navegação do Dashboard

Construção da sidebar responsiva, header e sistema de navegação com estado ativo.

  1. Sidebar Responsiva com Tailwind CSS (2 min)
  2. Navegação Ativa, Rotas Aninhadas e Breadcrumbs (2 min)
  3. Página de Analytics e Página de Configurações (8 min)

Módulo 4: Dark Mode com Tailwind CSS

Implementação do modo escuro com Tailwind, ThemeProvider e persistência da preferência do usuário.

  1. Configurando Dark Mode com Tailwind e next-themes (2 min)
  2. Toggle de Tema Animado e Persistência (3 min)
  3. Aplicando Dark Mode em Todos os Componentes (2 min)

Módulo 5: Internacionalização com next-intl

Configuração do i18n, arquivos de tradução pt-BR/en-US e seletor de idioma persistente.

  1. Instalando e Configurando next-intl para i18n (3 min)
  2. Seletor de Idioma e Usando Traduções nos Componentes (3 min)
  3. Metadata, SEO e Formatação de Datas por Locale (3 min)

Módulo 6: Funcionalidades do Dashboard

Cards de métricas, gráficos com Recharts e tabela de dados com filtros e paginação.

  1. Cards de Métricas e KPIs Dinâmicos (2 min)
  2. Gráficos Interativos com Recharts (8 min)
  3. Tabela de Dados com Filtros e Paginação (2 min)
  4. Ordenação de Colunas e Export de Dados (3 min)

Módulo 7: Deploy e Conclusão

Deploy profissional na Vercel com variáveis de ambiente, domínio customizado e próximos passos.

  1. Deploy na Vercel com Variáveis de Ambiente (3 min)
  2. Domínio Customizado e HTTPS Automático (2 min)
  3. Próximos Passos — Banco de Dados, Stripe e Testes (3 min)