Tutorial

Blog pessoal com Next.js e MDX

Nível
14 aulas
52m

Assistir agora

1. Introdução

Sobre o Tutorial

Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Blog pessoal com Next.js e MDX.

Descrição do projeto

Explore diferentes funcionalidades do Next.js criando um blog pessoal utilizando o MDX!

🔨 Requisitos

  • Utilize o Next.js na versão mais atual para construir a estrutura do projeto e gerenciar as rotas da aplicação.
  • Implemente a aplicação pensando na responsividade e adaptabilidade.
  • Utilize MDX para criar as postagens do blog.
  • Estilize a aplicação utilizando o TailwindCSS.

Página inicial - lista de postagens

  • Liste as postagens do blog contendo título, uma breve descrição, a data de publicação e um link que direciona para a postagem completa.
  • A lista deve ser organizada de forma que as postagens mais recentes apareçam primeiro.

Página da postagem

  • Crie um arquivo .mdx para cada postagem.
  • Cada arquivo .mdx criado deverá ser uma rota da aplicação.
  • Adicione qualquer elemento que achar relevante para a sua postagem, como imagens, headings, listas, links, etc.

Deploy

  • Faça o deploy da sua implementação no Codante.

🔍 Dicas

  • Estude sobre a biblioteca @next/mdx, disponibilizada pelo Next.js.
  • Você pode utilizar o Tailwind Typography para estilizar o conteúdo das postagens de maneira rápida e eficiente.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para usar sua criatividade e criar um design único.

🔗Link do Figma

👉🏽 Sobre esse mini-projeto

Tecnologias sugeridas

  • TailwindCSS
  • Next.js
  • MDX
  • TypeScript

Pré-requisitos

  • HTML, CSS
  • JavaScript, React

❓ FAQ

Posso utilizar outras ferramentas além do MDX para criar as postagens?

A utilização de arquivos MDX foi pensada para remover a necessidade de um back-end para armazenar as postagens e aproveitar a praticidade de se criar conteúdos utilizando documentos no formato markdown. Isso tudo é facilitado pela biblioteca @next/mdx. A solução final oficial será desenvolvida utilizando essa ferramenta. No entanto, você pode implementar da forma que mais achar conveniente.

Como faço para ver a resolução oficial?

A resolução oficial sempre é disponibilizada no site oficial do Codante. Algumas resoluções são abertas e outras são exclusivas para os nossos membros PRO.