Projeto Blog pessoal com Next.js e MDX

Crie o seu blog pessoal utilizando Next.JS. Aproveite para entender o funcionamento de arquivos MDX na criação das suas postagens.

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.

Tutorial

Capa do tutorial (thumbnail)

Junte-se a outras 49 pessoas que estão fazendo esse mini projeto.

Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário