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.
👉🏽 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.