Blog pessoal com Next.js e MDX

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.