Como criar uma rota dinâmica de projetos por slug no Next.js 13?

No App Router, crie a estrutura app/projects/[slug]/page.tsx para exibir cada projeto conforme o slug.

Como buscar dados do Hygraph CMS no Next.js 13 com cache?

Use a Fetch API com a opção next: { revalidate: 86400 } para revalidar os dados a cada 24 horas.

Como enviar um formulário de contato para o Discord no Next.js 13?

Crie uma Route Handler em app/api para receber o formulário e enviar os dados ao webhook do Discord.

Imagem do Curso gratuito Criando um Portfólio com Next.js 13, Tailwind CSS, Hygraph CMS, Framer motion e Typescript

Curso online gratuito Criando um Portfólio com Next.js 13, Tailwind CSS, Hygraph CMS, Framer motion e Typescript

Name: Criando um Portfólio com Next.js 13, Tailwind CSS, Hygraph CMS, Framer motion e Typescript
Availability: InStock

Duração do curso online: 5 horas e 12 minutos

Novo

Construa um portfólio moderno com Next.js 13, Tailwind e TypeScript. Curso online gratuito com CMS Hygraph, animações e deploy na Vercel.

Neste curso gratuito, aprenda sobre

Estruturar um portfólio no Next.js 13 (App Router) a partir de um template
Construir seções de UI: Hero, Conhecimentos, Projetos, Experiências e Contato
Integrar CMS headless (Hygraph) para conteúdo dinâmico e fácil atualização
Modelar schemas no Hygraph para Projects, Highlights, Skills e Work Experience
Consumir GraphQL/Hygraph com fetch no Next.js 13 e tipar dados com TypeScript
Configurar cache e ISR com fetch (revalidate) para performance e dados estáveis
Criar rotas no app: /projects, página de projeto e rota dinâmica por slug
Gerar páginas estáticas no build com generateStaticParams para rotas dinâmicas
Definir SEO com metadata estático e dinâmico via generateMetadata
Criar Link customizado evitando loop/invocação infinita ao compor componentes
Usar React Hook Form + Zod e habilitar hooks com "use client" no componente
Criar API Route (Route Handler) para receber formulário e enviar ao Discord
Adicionar animações na UI com Framer Motion
Fazer deploy na Vercel e configurar variáveis de ambiente/segredos em produção

Sobre o curso online gratuito

Ter um portfólio rápido, bonito e fácil de atualizar é um diferencial real para quem busca vaga em Front-End ou quer mostrar projetos com mais profissionalismo. Neste curso online gratuito, você cria um portfólio completo com Next.js 13 (App Router), Tailwind CSS e TypeScript, seguindo um fluxo de desenvolvimento próximo do que é usado no mercado: páginas bem estruturadas, componentes reutilizáveis, responsividade e atenção à performance.

Ao longo do projeto, você integra um CMS headless (Hygraph) para transformar o site em algo vivo: em vez de editar conteúdo “no código” toda vez que fizer um novo projeto, você aprende a modelar e consumir dados para alimentar seções como destaques, lista de projetos e detalhes por slug. Isso traz praticidade para manutenção e abre espaço para evoluções, como incluir novas experiências, alterar textos e reorganizar projetos sem retrabalho.

O curso também reforça boas práticas do Next.js 13, como criação de rotas estáticas e dinâmicas, geração de páginas no build, controle de cache e revalidação para equilibrar velocidade e atualização do conteúdo. Além disso, você implementa SEO estático e dinâmico para melhorar a forma como suas páginas aparecem em buscadores e quando compartilhadas, dando ao portfólio um aspecto mais completo e confiável.

Para completar a experiência, você constrói uma área de contato com validação robusta usando React Hook Form e Zod, e envia as mensagens para um canal via Discord Webhook, simulando um cenário real de captura de leads/contato. Você ainda adiciona animações com Framer Motion para deixar a navegação mais fluida e apresenta o trabalho final com deploy na Vercel, incluindo cuidados essenciais com variáveis de ambiente e segredos.

No fim, você terá um portfólio publicado, escalável e orientado a conteúdo, pronto para ser usado em processos seletivos e para demonstrar domínio prático de Next.js 13, TypeScript, integrações com CMS e preocupações importantes de front-end moderno como performance, SEO e experiência do usuário.

Conteúdo do curso

Aula em vídeo: Criando Portfólio com Next.js 13 (#01) - Clonando o Template e criando a sessão Hero 49m
Exercício: Qual é a principal vantagem de usar um CMS como o Hygraph em um portfólio com Next.js?
Aula em vídeo: Criando Portfólio com Next.js 13 (#02) - Criando a sessão de Conhecimentos 12m
Aula em vídeo: Criando Portfólio com Next.js 13 (#03) - Criando a sessão de Projetos em Destaque 19m
Exercício: Ao criar um componente de Link personalizado no projeto com Next.js 13, qual prática evita erro de loop/invocação infinita?
Aula em vídeo: Criando Portfólio com Next.js 13 (#04) - Criando a sessão de Experiência Profissional 11m
Exercício: Qual estratégia de layout foi usada para alinhar o ícone/logo à esquerda e o conteúdo da experiência à direita, mantendo uma coluna fixa e outra flexível?

Aula em vídeo: Criando Portfólio com Next.js 13 (#05) - Criando sessão de Contato com Hook Form e Zod 14m
Exercício: Para que o formulário de contato funcione com hooks em um componente no Next.js 13 (App Router), o que deve ser adicionado no arquivo do componente?
Aula em vídeo: Criando Portfólio com Next.js 13 (#06) - Criando a Página de Projetos 19m
Exercício: No Next.js 13 usando o diretório app, como criar a rota /projects?
Aula em vídeo: Criando Portfólio com Next.js 13 (#07) - Criando a Página de Projeto 22m
Exercício: Em Next.js 13 (App Router), como criar uma rota dinâmica para exibir um projeto pelo slug dentro de /projects?

Aula em vídeo: Criando Portfólio com Next.js 13 (#08) - Configurando o Hygraph CMS 14m
Aula em vídeo: Criando Portfólio com Next.js 13 (#09) - Buscando dados do Hygraph com Fetch API 24m
Exercício: Qual é a forma recomendada de configurar o tempo de cache (revalidate) ao buscar dados do Hygraph em Next.js 13 usando fetch?
Aula em vídeo: Criando Portfólio com Next.js 13 (#10) - Buscando Conhecimentos e Destaques do Hygraph 16m
Exercício: Ao criar o modelo "Project" no Hygraph para um portfólio, qual conjunto de campos é essencial para suportar página de listagem, página individual e destaque na home?
Aula em vídeo: Criando Portfólio com Next.js 13 (#11) - Buscando Experiências Profissionais do Hygraph 17m
Exercício: Ao modelar o conteúdo de Work Experience no Hygraph e exibir no Next.js com TypeScript, qual conjunto de campos representa corretamente uma experiência profissional completa?
Aula em vídeo: Criando Portfólio com Next.js 13 (#12) - Buscando Projetos do Hygraph 13m
Exercício: Ao buscar e exibir projetos do Hygraph no Next.js 13, qual abordagem melhora a performance ao manter os dados estáticos por 24 horas?

Aula em vídeo: Criando Portfólio com Next.js 13 (#13) - Gerando Rotas Estáticas durante o Build 09m
Exercício: No Next.js 13, qual função deve ser exportada para informar ao build quais rotas dinâmicas (ex.: projetos por slug) devem ser geradas estaticamente?
Aula em vídeo: Criando Portfólio com Next.js 13 (#14) - Adicionando SEO Estático e Dinâmico 09m
Exercício: No Next.js 13 (App Router), qual é a forma correta de definir metadados dinâmicos (ex.: título com nome do projeto) usando dados carregados pela página?

Aula em vídeo: Criando Portfólio com Next.js 13 (#15) - Formulário de Contato com Discord Webhook 16m
Exercício: Qual é a forma recomendada de criar a rota que recebe os dados do formulário de contato no Next.js 13 (App Router) para então enviar ao Discord via webhook?
Aula em vídeo: Criando Portfólio com Next.js 13 (#16) - Adicionando Animações com Framer Motion 36m
Aula em vídeo: Criando Portfólio com Next.js 13 (#17) - Deploy do Projeto na Vercel 04m
Exercício: Ao publicar um portfólio em Next.js 13, qual é o passo essencial para o projeto funcionar corretamente em produção quando depende de chaves/segredos?

Cursos online Gratuitos sobre JavaScript

Aprenda sobreJavaScript

Aprenda JavaScript com cursos online gratuitos e com certificado para impulsionar sua carreira em desenvolvimento web. Encontre aulas para iniciantes e profissionais sobre lógica de programação, funções, objetos, DOM, eventos, APIs e frameworks. Estude no seu ritmo, desenvolva projetos práticos e conquiste novas oportunidades no mercado de tecnologia.