TutoriaisNext.js
Como Criar um Blog com Next.js e Markdown
há cerca de 1 anoPor Kaique Yamamoto
Este é um exemplo de post usando o novo sistema baseado em arquivos Markdown. Aprenda como migrar do MongoDB para arquivos estáticos.
Introdução
Este é um exemplo de post criado com o novo sistema baseado em arquivos Markdown. O objetivo é migrar gradualmente do MongoDB para arquivos estáticos.
Por que Migrar?
A migração para arquivos Markdown oferece várias vantagens:
- Versionamento: Posts ficam no controle de versão (Git)
- Performance: Arquivos estáticos são mais rápidos
- Simplicidade: Não precisa de banco de dados para posts
- Portabilidade: Fácil de migrar ou fazer backup
Estrutura do Frontmatter
O frontmatter contém todos os metadados do post:
title: Título do postslug: URL amigável (deve corresponder ao nome do arquivo)excerpt: Resumo que aparece nas listagenscoverImage: Imagem de capacategories: Array de categoriastags: Array de tagsstatus: "draft" ou "published"featured: true ou falsepublishedAt: Data de publicação
Renderização
O conteúdo é renderizado usando react-markdown com suporte a:
- Syntax highlighting: Código com destaque de sintaxe
- GitHub Flavored Markdown: Tabelas, checklist, etc.
- Estilos customizados: Classes Tailwind aplicadas automaticamente
Exemplo de Código
// Exemplo de função TypeScript
function renderMarkdown(content: string) {
return <MarkdownRenderer content={content} />;
}
Próximos Passos
- Criar utilitários para ler arquivos Markdown
- Implementar parser de frontmatter
- Criar função para listar todos os posts
- Integrar com as páginas existentes
Conclusão
Este sistema permite migrar gradualmente do MongoDB para arquivos Markdown, mantendo a compatibilidade com o código existente.
Autor: Kaique Yamamoto
Data: 20 de dezembro de 2024
Tags:Next.jsMarkdownMigração