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 post
  • slug: URL amigável (deve corresponder ao nome do arquivo)
  • excerpt: Resumo que aparece nas listagens
  • coverImage: Imagem de capa
  • categories: Array de categorias
  • tags: Array de tags
  • status: "draft" ou "published"
  • featured: true ou false
  • publishedAt: 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

  1. Criar utilitários para ler arquivos Markdown
  2. Implementar parser de frontmatter
  3. Criar função para listar todos os posts
  4. 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

Vamos conversar sobre seu projeto?

Entre em contato para discutir como posso ajudar a transformar suas ideias em soluções tecnológicas de alta qualidade.

WhatsApp