Como criar um Sistema de Apresentações (Slides) com Next.js + Tailwind CSS

Neste vídeo eu crio um sistema de apresentações (slides) com Next.js + Tailwind CSS, organizando roteiro e slides em Markdown e publicando com deploy gratuito na Vercel via GitHub.
Também mostro como planejar o projeto usando IA no terminal (Cloud Code / modo planejamento) e como pensar a estrutura por slug (/presentations/[slug]).


Hoje eu monto um MVP de um “slide deck” próprio: um sistema de apresentações interativas onde cada apresentação vira uma página por slug, e o conteúdo fica versionado como docs-as-code (Markdown). A ideia é manter tudo dentro do meu domínio e poder publicar as apresentações para outras pessoas acessarem.

link para o matteverso:

O que você vai ver:

Stack e decisões: Next.js + Tailwind CSS

Organização do projeto (docs, scripts e slides) em Markdown

Estrutura de rotas por slug (/presentations/[slug])

Visão de MVP vs evoluções (componentização, layout por apresentação, etc.)

Deploy via GitHub e hospedagem na Vercel (free)

Se você curtir, comenta:

Que formato de slides você usaria (Markdown puro, MDX, JSON, etc.)

O que você faria diferente na arquitetura

Se quer a “versão 2” com componentização dos slides

Recursos / links:

Capítulos:
0:00 Início e objetivo do vídeo
2:29 Stack: Next.js + Tailwind CSS
3:20 Abrindo o “Cloud Code” no terminal e modo planejamento
4:06 Pasta docs e ideia de gerar apresentações a partir do contexto
5:03 Estrutura: script + slides e organização em Markdown
13:48 Revisão do que foi gerado (14 slides)
14:49 Deploy via GitHub
19:09 Arquitetura da rota /presentations/[slug] (dinâmico x estático)
20:27 MVP do MVP e visão do sistema no futuro
25:50 Definindo slug e ajustes no prompt/fluxo
28:38 Fase 2: componentização dos slides + progress bar
34:02 Encerramento e desafio (HTML/CSS/JS puro)


#Nextjs #TailwindCSS #Vercel