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

Curso online gratuitoCriando 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

Curso gratuito para criar um portfólio com Next.js 13, Tailwind, TypeScript, Hygraph CMS, Framer Motion, SEO e deploy na Vercel.

Neste curso gratuito, aprenda sobre

Estrutura Inicial e Seções da Home
Contato e Páginas de Projetos no App Router
Integração com Hygraph: Configuração e Consumo de Dados
Otimizações: Rotas Estáticas e SEO
Integrações, Animações e Publicação

Descrição do curso

Aprenda a criar um portfólio moderno e profissional com Next.js 13, Tailwind CSS, TypeScript, Hygraph CMS e animações com Framer Motion. Neste curso online gratuito da categoria Tecnologia, Informática e Programação, você constrói uma aplicação completa com visual atraente, navegação fluida e componentes reutilizáveis, pronta para apresentar seus trabalhos de forma clara e convincente.

Ao longo do projeto, você integra um CMS headless para gerenciar conteúdos com praticidade e consumir dados via Fetch API, organizando informações de forma dinâmica e escalável. Também explora estratégias de rotas estáticas no build e boas práticas para performance e estrutura de páginas, deixando seu portfólio mais rápido, estável e fácil de manter.

O curso ainda aborda implementação de formulário com validação, integração com webhook para receber mensagens e cuidados essenciais de SEO estático e dinâmico para melhorar a presença do site em buscadores. Ao final, você faz o deploy na Vercel e sai com um portfólio publicado, com acabamento profissional e base sólida para evoluir com novos projetos e conteúdos.

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

Domine JavaScript com cursos online gratuitos! Aprenda programação, crie sites dinâmicos e impulsione sua carreira. Inscreva-se já e comece a codificar!

Este curso gratuito inclui:

5 horas e 12 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

Mais cursos gratuitos em Programação Front-End

Curso GratuitoReact JS

(24)

1h22m

10 exercícios

Curso GratuitoProgramação para Web

(4)

14h37m

12 exercícios

Curso GratuitoAprenda HTML criando um clone da Netflix

(2)

4h16m

17 exercícios

Curso GratuitoHTML completo

(36)

4h18m

15 exercícios

Curso GratuitoCSS Flexbox no desenvolvimento de sites

(1)

1h18m

10 exercícios

Curso Gratuito Criação de loja virtual

(12)

20h31m

21 exercícios

Curso GratuitoJavascript completo

4.96

(84)

3h49m

24 exercícios

Curso GratuitoCriação de sites em Wordpress

4.95

(43)

6h44m

42 exercícios

Curso GratuitoHTML e CSS para iniciantes

4.92

(622)

4h31m

16 exercícios

Curso GratuitoJquery

4.92

(13)

9h19m

53 exercícios

Ebook + Áudiobooks gratuitos! Aprenda ouvindo ou lendo!

Capa do Ebook gratuito Curso completo de HTML, CSS e Javascript para se tornar um Desenvolvedor Front End

4.73

(11)

Capa do Ebook gratuito Como utilizar o Javascript no desenvolvimento de sites web

4.5

(4)

Capa do Ebook gratuito HTML + CSS para criação de sites incríveis

(2)

Capa do Ebook gratuito Curso completo de HTML

3.5

(2)

Capa do Ebook gratuito Curso completo de CSS

(1)

Baixe o Aplicativo agora para ter acesso a + de 5000 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

Cursos online 100% gratuitos do início ao fim

Milhares de cursos online em vídeo, ebooks e áudiobooks.
Mais de 60 mil exercícios gratuitos

Para testar seus conhecimentos no decorrer dos cursos online
Certificado Digital gratuito válido em todo o Brasil

Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.